Graphics can be dynamically drawn in the browser using the Canvas API. Kyle walks through the façade he created to simplify the Canvas methods and enable features like chaining.
(funky music) - Next I want to talk about Canvas. I'm going to pick on Canvas a little bit from the perspective of facades because there's a lot of problems that Canvas has. But I want to just show you real quick the facade that I created to try to address some things. So we create a canvas, we give it a width and a height. The first most annoying thing that I've ever dealt with in dealing with Canvas, the first annoying thing, is that Canvas actually has two different coordinate systems that you have to concern yourself with.
There's the addressable space coordinate system that is the physical number of pixels that your canvas can have and there's the physical display space that is the CSS rendered width and height that it shows up in your page. Theoretically it seems like almost all the time you would want those two to match. There are very few cases that I can think of where I would want an addressable coordinate system different from my visible coordinate system. Maybe zooming and stuff, but very rare. But Canvas doesn't do anything to help you with that.
And so I built into this facade the ability to say like you see there in line four, match the dimensions so it'll automatically render the CSS to the same dimensions as the physically addressable pixel space. Another thing that's really annoying about Canvas is the fact that you have no chain ability. So this API uses chain ability as you can see. I can call set styles and start path and define segments. So I don't have to keep repeating my canvas over and over again. I took advantage of object literals to kind of collect various different styles together so the stroke styles of width and color are kind of collected together and you don't have to repeat yourself quite as much.
Paths starting. There's a quirk in Canvas that some of you may have seen. I've seen this from time to time. Somebody sends out a demo that everybody gets all excited about on Twitter, and everybody's like go look at this really cool geometric pattern that I drew in Canvas, and they're using some mathematical function to draw some really cool curly thing. And I've noticed from time to time that you pop that open in Chrome and you pop it open in Firefox and it's not quite the same thing. You'll see mostly the same design, but like in Firefox or in Chrome or whatever you'll see a line just kind of bizarrely going off.
I don't know if anybody's ever seen that before. The reason for that is there's a quirk with Canvas, that if you don't give it an initial starting point, a registration point for a path, it assumes zero zero. Well that's not always true because some browsers assume zero zero and some just start with the first point that you give it. So that's the reason why you see that quirk difference, because somebody didn't know that and they didn't properly cross this. Facades are a clear way to fix that so we can assume a zero zero always and correct those kinds of inconsistencies.
Last thing I'll pick on with Canvas which is something again that I tried to address with this facade, have any of you ever done work with Canvas? Anybody ever done any drawings with Canvas? So a few of you are raising your hands. If you've ever dealt with Canvas, those of you who are online or listening, if you've ever dealt with Canvas, there's an interesting feature that allows you to rotate, there's both rotating and scaling and skewing but I'll talk about rotate specifically. Because when I see rotate, I think I'm rotating my drawing.
And when I go read any number of books out there that talk about Canvas or dozens and dozens of different respected blog posts that talk about Canvas, they all suggest to you that when you call rotate it will rotate your drawing. And they suggest to you if you call rotate and you pass in positive 45, that it will rotate your drawing 45 degrees clockwise. I think I'm doing that backwards or whatever, but you get the point. Passing a positive 45 you get clockwise, a negative 45 you get counter clockwise, or whatever they say.
And so you go and look at this really cool tutorial, and like, awesome. So then you go to some Canvas and you say here's my picture of my kitten that I want to rotate it 45 degrees, and so I put my kitten on the canvas and I call rotate 45 and my kitten went the other direction from what I was expecting. You go back and you read the blog post and the book and you're like, it says positive should go this way but negative, ah, F it. So you just put a negative sign in front of it. And then all of a sudden it goes in the right direction and you think, I don't why but I'll just go on about my road and nobody ever seems to stop and ask themselves, why is it that it's always rotating in the wrong damn direction? The reason is there's a conceptual problem with the way these things are wr-- With the way the API's designed and with the way things are documented because you're not actually rotating the drawing, you're rotating the coordinate system.
And when you rotate a coordinate system, you're going to get the opposite effect of rotating the drawing. But nobody seems to take the time to think about those things and design APIs so that they match, the way you use an API matches the way the conceptuals work with the functionality. That's something I think we can fix so I tried to address that with this facade. So, facades can fix little tiny problems but they're mostly concerned with just insulating us from weird cross browser quirks and issues with the way APIs are designed.
- HTML5 facades
- Using APIs
- File I/O
- The asynquence library
- Publishing npm modules
- Grunt and Gulp
- Node as a web server
- Simulating asynchronicity
- Making a socket connection
- User-triggered messaging
- Signaling and data channels