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

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

[00:00] Once you have a canvas on the page and a reference to the 2D rendering context, you're ready to draw some content on that canvas. One of the most common ways of drawing content is drawing paths. A path is a series of points with lines or some sort of curves between them. Path can be stroked, meaning have its outline drawn or filled, meaning the interior of the path will be filled with a color.

[00:22] The usual sequence of events when drawing paths on canvas is to begin the path with a call to context.beginPath. Followed by one of our drawing commands and ending with either a call to context stroke or context filled, or possibly both. Context has a concept of a virtual cursor position which is located at the end point of the last command you gave it.

[00:49] It's worth mentioning that the coordinate system for canvas has the origin at the top left with the X axis extending positively to the right and the Y axis extending positively downwards. This can be changed via transformations which I'll cover in a later video.

[01:04] Here I can say, "context move to 100, 100." This moves the virtual cursor to the position given without drawing anything. I can then say, "context line to 250." This simply draws a line from the first point to this new point. Here I'll draw a rectangle with a series of lines.

[01:38] Paths also have the concept of being open or closed. Here I'll do the last line back to the first point to manually close it. If I left that last command off, we would have an open path. Rather than manually closing a path by drawing the final line, you can also call context.closedPath to automatically close the path. Now we have a rectangle again.

[02:01] Rather than just stroking the rectangle, you can also fill it. Note that if you call "fill," it automatically closes the path for you. I can remove this call to close path and then we get the same result. You can draw virtually any shape imaginable with short line segments like this but there are some shortcuts.

[02:19] For example, rather than drawing all these lines, I can just call, "rect," passing in the X and Y, width and height of a rectangle that I want to draw. Here I'll say, "100 for X, 100 for Y and give it a width of 100 and a height of 300." There's our rectangle.

[02:37] Furthermore, rather than making a call begin path and stroke or fill, there are two additional shortcuts; stroke rect and fill rect. You can just call these directly without any other set up or finalization code. It will stroke or fill the rectangle described. There's also a clear rect function which will erase any content in the specified rectangle.

[02:58] Unfortunately, those are the only shortcuts of their kind included in the canvas drawing API though it's simple enough to make similar ones on your own for drawing other shapes.

Course

Learn HTML5 Graphics and Animation

Drawing Paths - Lines and Rectangles

Share this video with your friends