Real-Time Web with Node.js Real-Time Web with Node.js

Canvas API

Kyle Simpson
You Don't Know JS
Check out a free preview of the full Real-Time Web with Node.js course:
The "Canvas API" Lesson is part of the full, Real-Time Web with Node.js course featured in this preview video. Here's what you'd learn in this lesson:

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.

Get Unlimited Access Now

Transcript from the "Canvas API" Lesson

>> [MUSIC]

>> Kyle Simpson: Next, I wanna talk about canvas. I'm gonna pick on canvas a little bit from the perspective of facades because there's a lot of problems that canvas has. But I wanna just show you real quick the facade that I created for it to try to address some things.

[00:00:18] 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.

[00:00:38] And there's the physical display space, that is, the CSS rendered with the 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.

[00:00:56] 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 on line four, [COUGH] match the dimensions. So it will automatically render the CSS to the same dimensions as the physically addressable pixel space.

[00:01:17] 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 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.

[00:01:41] Paths starting, there's a quirk in canvas that some of you may have seen, I've seen this from time to time. And 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.

[00:01:56] 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 in Firefox or in Chrome or whatever, you'll see a line just kind of bizarrely going off.

[00:02:17] 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.

[00:02:35] So that's the reason why you see that quirk difference because somebody didn't know that and they didn't properly process. Facades are a clear way to fix that. So we can assume a zero, zero always and correct those kinds of inconsistencies. The last thing I'll pick on with canvas, which is something again that I tried to address with this facade, [COUGH] have any of you ever done work with canvas?

[00:02:58] Anybody ever done any drawings with the canvas? So a few of you are raising your hands. If you've ever dealt with canvas, those of you that 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.

[00:03:15] 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 respective the blog posts that talk about canvas, they all suggest to you that when you call rotate, it will rotate your drawing.

[00:03:33] 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. Pass in a positive 45, you get clockwise, a negative 45 you get counterclockwise, or whatever they say.

[00:03:51] And so, you go and look at this really cool tutorial and you're 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.

[00:04:10] And you go back and you read the blog post or the book and you're like it says positive should go this way, but negative. F it, and 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 know why, but I'll just go on about my road.

[00:04:24] 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 written, 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.

[00:04:41] And when you rotate a coordinate system, you're gonna get the opposite effect of rotating the drawing. But nobody seems to take the time to think about those things and design API so that 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've tried to address that with this facade.

[00:05:01] 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.