Introduction to the HTML Canvas element

Drawing Paths - Lines and Rectangles

Drawing Paths - Curves and Arcs

Drawing Styles on HTML5 Canvas

Gradient Fills on the HTML5 Canvas

Drawing Text on Canvas

HTML Canvas and Images

Canvas Effects

Canvas Transformations

Canvas and Pixels

Listening for Mouse and Keyboard Events with HTML Canvas

Animating with Canvas

Learn HTML5 Graphics and Animation

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about `<canvas>`, and get ready to start drawing.

https://app.egghead.io/api/v1/lessons/javascript-introduction-to-html-canvas-element/subtitles

[00:00] The first thing you need to make sure of when using canvas is that you're actually using HTML5. This is done by setting the document's doctype. In previous versions of HTML, the doctypes were complex, but for HTML5, it's merely HTML.

[00:16] Anywhere in the body of the document, you can just create a canvas element. You should create the element with a pair of opening and closing tags. Although a simple, self-closing tag will probably work in most browsers, it's not correct and could cause problems.

[00:31] You'll also most likely want to give the canvas an ID so you can access it in your code. You can also specify the width and height as attributes of the canvas tag. Here, I'll set them both to 600. If you don't set these, it should default to a width of 300 and a height of 150, per the HTML5 spec.

[00:52] One thing you almost never want to do is set the canvas' size using CSS. Realize that a canvas is basically a bitmap image with rows and columns of pixels. When you set the width and height as attributes of the canvas tag, you're specifying the actual resolution of that bitmap in terms of how many pixels will make up the image.

[01:13] HTML will automatically allocate that same amount of space in the document layout. But if you use CSS to specify the size, you're only setting the layout size, not the number of pixels. The bitmap itself will be stretched or squashed to fit into that layout rectangle. This is almost never what you want to do.

[01:31] In the script, I'm going to use a window onload handler to make sure the canvas has actually been created before trying to access it with code. This isn't a recommended practice in a real-life application.

[01:42] You'll more likely be using jQuery's document ready functionality or some similar function in some other framework. I just want to keep things simple and framework-agnostic here and focus on the canvas drawing code.

[01:54] The first thing you want to do is get a reference to the canvas element on the page. You can do this with any of the usual element selection methods. One of the simplest would be getElementById, as this returns a single element.

[02:07] If you use a selector that could return multiple results, such as getElementsByTagName or getElementsByClassName, you'll have to specify which element in the returned array you want. If you only have a single canvas on the page, this would be element zero.

[02:23] Likewise, if you use jQuery or some other similar selection library, this will not return a raw canvas object, even if you select it by ID. jQuery will always give you a jQuery object, which is actually an extended array with all kinds of other properties.

[02:39] In order to do anything useful with the canvas, you will have to pull the canvas object out of that jQuery object, again, by referencing which element it is. Ultimately, you could skip creating the canvas in HTML and create your canvas totally in code by saying "document.createElement('canvas')" and then add that to the page with appendChild.

[03:02] However you go about it, you now have a canvas object. There's not a whole lot you can do with this object directly. Mostly, you'll be dealing with the 2D rendering context, which we'll get to in a moment, but you can use this canvas object reference to set the canvas' width and height via code, if you haven't already done so in the HTML or if you want to change its size for some reason.

[03:23] Setting the width and height in code will resize the bitmap itself, creating a new bitmap with a new pixel resolution and clearing out any other drawing that was on that canvas previously.

[03:35] Again, be wary of setting the size using jQuery like so. This translates into changing the CSS style of the element, which will just stretch or squash the bitmap. It won't change the resolution of the canvas itself.

[03:48] The final thing we'll do here is to get the 2D rendering context and draw something to this canvas so we can feel like we accomplished something here. To get the context, you say, "canvas.getContext," passing in the string "2D" and storing the result in a variable. All of your main work with canvas will be done via this context.

[04:10] This 2D string may have you wondering if there's a way of getting another type of context, such as a 3D context. Indeed there is, which is exactly what you'll do if you're working with WebGL, which operates on a 3D rendering context, but that's beyond the scope of this series.

[04:25] Context is where all the magic happens. This is where we draw shapes, text, images, set and fill strokes, apply various graphic effects, et cetera. Just to prove that we've done everything correctly so far, we'll draw a black rectangle on the canvas using the fillRect method.

[04:40] This takes parameters of X, Y, width, and height. I'll draw a 100-by-200-pixel rectangle at a position (10, 10). Sure enough, there is the shape. Next, we'll be learning more about the available drawing commands.

Introduction to the HTML Canvas element

Share this video with your friends

Course

Learn HTML5 Graphics and Animation