Canvas

[00:00:00]
>> Shirley Wu: And then we have one last part. [LAUGH] And it’s Canvas. And I want to talk about Canvas really quick, not only because it’s really, really important for when you have large datasets. And I talk about large datasets as like, if you need to render any more than let's say 2,000 SVG nodes, or if you have to have more than 1,000 something SVG nodes annimating or something, I would recommend Canvas.

[00:00:30]
Although if you have more than 2 or 3,000 nodes on the screen, I would first like to ask you to consider why you have 2 or 3,000 plus nodes on the screen, and consider filtering it or aggregating it or doing something to like bring it down. But if there's a really good reason as to why you want all of those elements, Canvas is a really, really good option.

[00:00:51]
And it's really performant because instead of having a bunch of SVG elements, it's only one DOM element and that we're quote unquote drawing shapes on. And so, it's kind of a different way of thinking because whereas SVG elements, interactivity is really easy because you can interact with each circle or each rectangle just like any other DOM element.

[00:01:16]
But with a Canvas, it's literally what it sounds like. You have a canvas that you're drawing on. So as soon as you've drawn a circle, you can't take that back, and you can't interact with it because it's basically just a splotch of color that you've put on to this Canvas element.

[00:01:36]
Having said that, I do want to show you how easy it is to do the things that we've been doing today with Canvas and D3 and React. And so, how to do Canvas is in render we want to do just like with SVG, we want to create a Canvas element and then set styles with height.

[00:02:01]
And then this is, I believe, the way to get it retina screen friendly. If you don't do this in Canvas, some of the edges look kind of blurry on a retina screen, so if you do this magical thing, it makes it crisp. And then, what you want to do is you want to go and grab that Canvas element and then you want to get context.

[00:02:29]
So it's .getContext 2d and this is how we're going to be drawing everything. So we're going to be drawing everything on, I usually shorthand it to CTX context. And so, just like with SVG, you can draw circles, you can draw rectangles, you can draw paths, and you can draw text but the commands are a little bit different.

[00:03:01]
SVG is dominoes and it looks like HTML, right? But Canvas is strictly, I want to say it's strictly JavaScript, and so you have to draw all of these for your JavaScript. I think, I haven't confirmed the opposite, but so that context that we grabbed earlier if we want to draw a rectangle we say, fillRect and these should look familiar to you to fillRect.

[00:03:30]
It's x, y, width, height or if you want to only give it an outline, StrokeRect the same exact attributes. And to do a circle, it's a little bit more tedious. You have to tell it to begin a path because in Canvas, the circle is apparently a special type of a path.

[00:03:52]
So begin path and this is like, the move to in the SVG path where you say, I'm going to start a new shape. And then an arc is xy, the radius, the start angle which is usually zero, the end angle which is usually 2 pi, and the anticlockwise.

[00:04:12]
This just gives you a little bit more options so that you can draw, I don't know, a semicircle or something? I've actually never really seen anybody do that but if you want to do that or maybe I've seen people do that. And then you have to tell Canvas context to fill that circle or to stroke it.

[00:04:31]
And again, with paths you can also do, you can give it commands to you can chain a bunch of commands to move to somewhere, draw a line to somewhere, draw a curve to somewhere. And then once you're finished drawing that shape, drawing that path, you can tell it to fill or you can tell it to stroke.