 To use a canvas element, you simply place it somewhere, and then in your JavaScript, you get the DOM object representing that element here using document.getElementById. That returns the canvas element, and from the canvas element object, you then call the method getContext, which returns a context object. Notice that we passed to getContext to string reading 2D because we're getting the 2D context object rather than the 3D. It is the context object returned by getContext, which has the methods we used to actually draw on the canvas. Why aren't these just methods of the canvas element itself? Well, I think the intention is that potentially in the future, you might want to have a totally different set of methods for drawing on the canvas. Like, in fact, we have with the 3D context object. Conceivably, we might want some different kind of two-dimensional context or three-dimensional context. As it stands over, there's just the 2D context and the 3D context, so you'll see getContext with the string reading 2D or 3D. And so far, those are the only options you will see there. In any case, once we have the context object, then we can actually draw on our canvas. Now, you'll note here that the first script tag is importing the jQuery library, and we're doing that in this case just for the sake of using the ready method. Otherwise, we're not going to be using any jQuery. So what happens in the loading of this page is that first jQuery is imported, and then we register this function to execute when the document is ready. And then when it's ready, it then gets the canvas element, and from that it gets the context object, and then using that context object, we can invoke its methods to actually draw on the canvas. Perhaps the most essential concept of the canvas is the coordinate system. The canvas itself is, of course, a grid of pixels, but the coordinate system we use to specify positions within the canvas actually has its grid lines running between the pixels. So here we see a coordinate system, which is 20 units wide and 14 units tall. Note, though, that 0, 0 is not in the bottom left corner, as you usually expect when you do like graphing an algebra. It's rather in the top left corner. And note that the coordinate 0 refers not to that top left little square. It refers to the precise point, which is the very top left of the space. So whereas the top left little square, you can think of that as the top left pixel in our canvas. Coordinate 0, 0 is not on top of the pixel. It's on the top left of the pixel. Likewise, our most bottom right coordinate, 2014, is at the bottom right of the bottom right pixel, not on top of the pixel itself. So again, the grid lines you see here are actually running between the pixels, not on top of them. If you wanted to express the location of, say, the top left pixel here, you would give it as the coordinate 0.5, 0.5, not 0, 0 or 1, 1. It's in between those two. And note that, yes, when we draw in the canvas, we can express coordinate values as floating point values rather than just integers. So 0.5, 0.5 is a valid coordinate value. Now, while it's most commonly the case that we have our coordinate grid have the same dimensions as our canvas is wide and tall in terms of pixels, that is, if the canvas's coordinate system is 20 units wide and 14 units tall, then the canvas is 20 pixels wide and 14 pixels tall. But that doesn't actually have to be a one-to-one correspondence. Like, say, I can have a canvas which is 500 by 500 pixels in size, but then its coordinate system can be something totally different, like, say, 700 units wide and 300 units tall. Now, when there is such a disparity, the coordinate 0, 0 is still in the top left of the canvas, and the largest coordinate, whatever the max dimensions of your coordinate system is, like, say, 700 comma 300, that's always in the bottom right of the canvas. So it's always at the bottom right of the bottom right most pixel. Effectively then, such disparities mean that the coordinate system has been scaled either up or down relative to the pixel grid. And as we'll see later, it's actually possible to translate our coordinate grid, that is, to move it left, right, up or down, such that the 0, 0 coordinate is not in the very top left of the canvas. Moreover, we can also rotate the grid. So we have the ability to transform our coordinate system, to scale it, to translate it, and to rotate it. And as we'll see quite a bit later, doing such can be useful because it enables us to draw things scaled up and down, moved around, and or rotated. For now, though, we just need to understand how to set the dimensions of the canvas itself in pixels, and also of its coordinate grid within. And somewhat confusingly, these dimensions are controlled by two sets of width and height properties. There's the width and height properties of the canvas element itself, and then there are the width and height styles of the canvas element, the CSS styles. It's the element properties which control the size of the coordinate grid, but the CSS styles which control the size of the actual canvas in terms of pixels on the page. Now, if you do not specify the canvas elements width and height, then it defaults to a width of 300 and a height of 150. And if you do not specify any CSS style width and height on the canvas, then the pixel dimensions will correspond one-to-one with the coordinate dimensions. So whatever the element width and height properties, those will be the actual pixel dimensions of the canvas if we leave the CSS styles unspecified. Effectively, what this all means is that because we usually want a canvas which has a grid that corresponds one-to-one with the pixel dimensions, then all we need to do is set the elements width and height, and we want to leave the CSS width and height unspecified. This may strike you as a bit odd because these days in HTML, most everything when we specify its width and height doing so on the element itself is generally the outmoded way of doing things back before CSS was adopted. Usually these days we just specify width and height in terms of CSS styles. So just understand that the canvas is an exception to that. Now, to actually set the width and height of the canvas element, you can do so in two ways. You can do so in the tag itself with the width and height attributes, or you can do so in JavaScript code with the height and width properties of the canvas object. And be sure to note here that unlike in CSS, you specify the dimensions just as straight numbers. You don't write a number in a string and it in PX. You just give the number itself. Now, here in this example, when we specify the width and height on the tag itself, but then specify different dimensions in code, we'll understand that the code runs later after the page is loaded, so you're actually modifying the existing dimensions in the code. In fact, you can resize your canvas at any time in the code just by specifying the height and or width properties. Just understand that when you do so, it will clear whatever has been currently drawn in the canvas. Perhaps the simplest thing we can draw in the canvas is just a solid rectangle, and we can do so with the fill rect method of the context object. Before we do so, though, we should set the fill style property to specify what color any subsequent rectangle we draw should be. For the fill rect method, we simply provide four numbers, the XY coordinate specifying the top left of the rectangle we're drawing, and then it's a width and height. And again, understand that our coordinate system can be expressed in floating point values, so XY within height can be floating point values. They don't have to be integers. For the fill rect property, we specify the color as a string, just like we do in CSS. We're drawing with a common color name recognized by CSS, like say black or red, or it's a color specified by three or six hexadecimal digits. And it's actually possible to specify a fill style which is not a solid color, but rather a gradient or what's called a pattern. But these are not things we'll discuss in our coverage. So here's a simple example of drawing a black square on a 50 by 50 canvas. CTX, remember, is our context object, and first we set its fill style property to a color value expressed as a CSS color string, and 00000, that of course is total black. And then we invoke the context's fill rect method with the arguments 20, 20, 20, 20, meaning a rectangle drawn with its top left corner at position 20, 20, and with a width and height of 20 and 20. And so we get a nice solid black square on our canvas. Note here that I am depicting the canvas twice, first at its proper size on the top and then blown up a zoomed in view on the bottom. And I do so so that you can see clearly when we instead draw at coordinate 20.5, 20.5. Remember that we're dealing here with a canvas which is 50 by 50, both in terms of its pixel size and its coordinate grid. And remember that this means that the coordinate lines effectively run between the pixels. In our previous example, when we drew a 20 by 20 square with its top left corner at 20, 20, well that solid black square was perfectly bound by grid lines of the coordinate system. But now in this example, the bounds of the rectangle we wish to draw run between the grid lines. And so of course because we only have one pixel in each little square of the grid, we're going to have to approximate because of course you can't draw on just half of a pixel or a quarter of a pixel, that's not possible. So a compromise is made and we end up with some pixels which are not totally black. Well, not a perfect solution, you can see at scale it is a pretty decent approximation. It does give the illusion here of a 20 by 20 pixel solid black square that's simply been moved over by half a pixel. So when the bounds of a rectangle don't neatly follow the grid lines of our coordinate system, then you're going to get along the edges, you're going to get some non-totally black pixels. And understand that the level of gradation of those partially included pixels is determined by how much of the border overlaps that pixel. So here you can see along the top, bottom, left and right, the border of a rectangle covers half of those pixels, so they're at half gradation. But then in the corners, the border only covers a quarter of the pixel, so they're at a quarter gradation. So this explains why when we draw the same 20 by 20 square at the coordinate 20.8, 20.8 along the bottom and right edges, the gradation is considerably darker than along the top and left because the border overhangs those pixels on the bottom and right much more than they overhang the pixels on the top and left. I'll remind you again in all of these examples, we're dealing with a coordinate system which is neatly lined up at the top left of the canvas and the dimensions are one-to-one with the canvas pixels such that the grid lines run neatly between each pixel. When this is not the case, however, you see the same sort of effect where given whatever the contour of the solid shape you're trying to draw, wherever those contours partially overlap pixels, those pixels get drawn as later gradations of whatever fill color you have specified. For drawing shapes other than rectangles, you should understand what the canvas calls the path. The path is a series of coordinates connected by lines and curves, though a path may actually be split into disjointed sections, which we call subpaths. So here, for example, here's a path with two subpaths. One is the angular four lines in the bottom left and in the top right you see a line connected to a curve. That's the other subpath. Now, this path, which I will depict in orange, is actually not drawn on the canvas. It's actually invisible. So when you construct a path, that itself does not actually draw anything on the canvas. To actually draw with the path, we invoke either the stroke method or the fill method. The stroke method strokes along the path. In a sense, making the path show up as a visible line on the canvas. The fill method, in contrast, will fill in the area circumscribed by the path or actually by the subpaths. So, given the path depicted here, we have two separate subpaths and they get filled in independently. So we'd have two filled-in shapes. The area is enclosed by drawing a straight line from the end of the subpath back to the start of the subpath. We'll show an example of that shortly, but first, how do you actually build the path? Well, at any one time, there is always one path associated with the context. Upon creation of the canvas, this path starts out empty, but if at any time you want to start the path over, if you want to reset it, you can do so with the begin-path method of the context. Now, a new path always starts out with no coordinates at all. There's no current subpath. There's no current coordinate. If at this point we invoke either Line 2 or the Move 2 method with a specified coordinate, that creates the first subpath of the path and gives it its first coordinate. After that first coordinate, however, Line 2 and Move 2 work differently. Line 2 extends the current subpath with a line to the specified coordinate. Move 2, in contrast, creates a new subpath at the specified coordinate. Move 2 effectively introduces a break in the path. Once we have our path the way we want it, we can then stroke it with the stroke method. Before doing so, however, we would likely set the stroke style, which is a property of the context, which is a string value specifying the color gradient or pattern of the stroke. Though, again, we won't cover here either gradients or patterns. So, consider a simple example. We have, again, our canvas with a coordinate grid of 20 units wide and 14 units tall, and assume also that our canvas is 20 pixels wide and 14 pixels tall. So, we start out constructing our path by invoking either Move 2 or Line 2. It doesn't matter in this case, we chose Move 2 with the coordinate 00. And then afterwards, we invoke Line 2 with the coordinates 20 and 14. So, we end up with a path with a single subpath and two coordinates stretching from 00 to 2014. Once we have our path, we then stroke it first specifying a color for the stroke style and then invoking stroke. And notice what we get in pixels while appearing to be just a black straight line when viewed at normal size here when we've zoomed in and looked at the individual pixels, you can see, well, they're not purely black. Much like with the drawing of the rectangle, the canvas intelligently approximates as best as it can given the correspondence between the coordinate grid and the path along the grid and the actual grid of pixels that underlie that area of the coordinate system. Without this intelligent gradation of the pixels along the path, the line would appear to be much jaggier. For another quick example, this time first we'll set the canvas to a width and height of 500 by 500. And again, we'll start our path at 00 and draw it to the bottom right-hand corner, in this case, 500, 500. And then we invoke move to 100, 300, start a new subpath at that coordinate, and then drawing a line down to 100, 400. And again, once we have our path, we invoke the stroke method first setting the color. Though I believe actually that black is the default stroke color, so it's probably unnecessary to actually set it to black, but do so just in case. Now, when we newly create our canvas, the line width is set by default to just a pixel width of 1, but we can set a different line width to draw with the line width property. Here we're setting it to 10, and so the lines which we're stroking are 10 pixels wide. It's also possible to change how the ends of the line are drawn by default they're rectangular, but here we set the line cap property to round, so it rounds off the ends of the lines we draw. And just be clear that whatever the current style settings are, the width, the color, the line cap, those values only matter when stroke is invoked. That's what determines what you see. So if you want to draw two separate lines, you have to draw them as separate paths and stroke them individually. So here first we're drawing the diagonal line as black and one pixel wide, but then we invoke begin path to reset the path and to draw that path as 40 pixels wide and green. Now, if you don't properly understand the relationship between the coordinate grid and the underlined pixels, you will get confused by the very simple case of attempting to draw a horizontal or vertical line. Here, for example, we have our path set as a vertical line running from 10, 0 to 10, 14. If we then stroke this path as a single pixel-wide black line, what we will get, again, assuming that there's a one-to-one correspondence between the coordinate grid and the pixel dimensions of the canvas, what we will get is not a single pixel-wide black line, but a two-pixel-wide gray line. What's going on here is that the path runs precisely between the two pixels and it straddles both of the pixels on either side equally. So given the pixels, there's no possible way to have just a single pixel-wide black line running precisely down the path. The canvas somehow has to split the difference and it does so drawing less than black on both sides of the line. If we really want our perfect single pixel-wide black line, we should draw the path down the precise middle of a column of pixels. So here now the path runs from 9.5, 0 rather than 10, 0 down to 9.5, 14. And then a black one-pixel-wide stroke down this path gets us a precisely one-pixel-wide and totally black line. So the lesson is if you want a vertical or horizontal line of a precise actual width, you should position the path in the precise middle of where the line should appear. If you want to create a path that loops around on itself such that you create a closed shape, you could do so manually. That is simply in focal line 2 with a coordinate which was your first coordinate. But as a convenience, there's a closed path method which will effectively do the same thing except the line created by closed path actually is a new sub-path and that line fills the gap between the start and end of the previous sub-path. So if you invoke closed path when the path has more than one sub-path understand that you're just closing the last sub-path. The fill command, as the name implies, will draw the filled area circumscribed by each sub-path of the current path and understand that if a sub-path does not form a closed shape, fill will draw in the area of the sub-path as if it were closed as if there were a line connecting the start and end point of that sub-path. Just be clear that unlike closed path fill doesn't actually create any new sub-paths or modify any existing sub-paths. It simply just draws as if the sub-paths were closed but it doesn't actually close them. So here for example on our canvas which again is 500 by 500 we create a path containing two disjointed sub-paths and then we stroke that path with a red line which is four pixels wide. If we take the same example set fill style to black and invoke the fill method this is what we get though neither of the two sub-paths form to closed shapes. What we see drawn here with the fill is as if they were closed. Now if we take the same example and throw in an invocation of closed path this doesn't really affect the fill the fill will behave the same regardless whether the path is closed or not but if you look at the red lines you can see from our stroke here that the triangle on the right now has three sides rather than just two. The first side is the sub-path created by the invocation of closed path and note that yes the fill method does fill in every sub-path and that new line is actually its own sub-path but of course a straight line doesn't have any area to it so when that is automatically closed and filled in there's just no area there to draw in so it doesn't really change anything. That's true with any sub-path which is a straight line it's not going to have any fill area. For creating an arc segment of a path we have the arc method to which you specify a center coordinate around which to draw your arc and then a radius from that center point at start angle and end angle and a Boolean value specifying whether to go clockwise or anticlockwise, the default being clockwise. Now the strange thing about arc is that it doesn't necessarily draw just an arc it also draws a line than an arc. You're adding two new points onto the current sub-path the first connected by a line and the second connected by an arc and it works this way so that the arc is always connected to the current sub-path otherwise it would be a disjointed arc not necessarily connected to your current sub-path. So here for example we again start out with a canvas of 500 by 500 and the first component of our path is an arc centered around 300, 200 with a radius of 50 with a start angle of 0 and an end angle of 1 and understand the angles are expressed in radians not in degrees and of course pi radians is 180 degrees so this is less than one third of 180 degrees so this first arc is the one you see on the right it curves downwards without quite reaching 90 degrees and then our next addition to the path is an arc centered around 100, 200 again with a radius of 50 but this time arcing from 0 to math.pi math is an object in the browser namespace it's always there and it has this value which of course is 3.1415 I don't know how many significant digits it has but it's pi of course and here this time with arc we're specifying anti-clockwise is true so the arc is going from 0 to pi radians anti-clockwise and of course note where the new arc starts is connected by a line to where the previous arc left off so when you draw an arc a line is drawn from the current end of the path to where the arc begins and of course so we have our path we stroke style and we stroke in it draws this red line now be clear that the tricky thing dealing with arc is that you don't specify where the arc begins or ends in terms of its precise coordinate you specify the center point so here in this example for the first arc we specify the center point of 300, 200 and a radius of 50 and a start angle of 0 so the arc is actually beginning 50 units in that direction from the center point from 300, 200 so the start point is actually 350, 200 likewise with the other arc the starting point of the arc is not the coordinate we specify so it's tricky then if you want to draw an arc simply starting at where the current end of your sub-path is because you have to do a little math to figure out the center point, the radius and the starting angle now just to be clear here the first arc we drew just appeared as an arc with no line accompanying it only because the path at that time was currently empty there were no previous coordinates if before drawing the path we just moved to move to 400, 400 then when we draw the arc it's creating the line extending from 400, 400 to the start of the arc now the arc method is one method for drawing an arc but there's also the arc two method which draws a line and an arc just the same just like the arc method but you describe the arc differently you describe it as an arc circumscribed by two lines and then for other kinds of curves we have the ellipse method you specify two radii so that you get an elliptical arc and then there's the bezier curve and quadratic curve methods for creating what are called bezier curves and quadratic bezier curves I won't describe them in detail but the idea of a bezier curve is that it's a curve between two points where the curve is described by some so-called control points off of the curve by moving the control points around you change the shape of the curve I recommend you check out the Wikipedia page for more information that makes it quite clear of how they work