 If you want to learn graphics programming, the simplest place to start these days is with the canvas element in the browser. In this unit, we'll be covering most everything you need to know about using the canvas, as well as a few of the basic concepts of computer graphics, starting with the distinction between raster graphics and vector graphics. From there, we'll discuss the relationship between the coordinate system of the canvas and the actual pixels of the canvas. Then we can go over the basic methods for drawing lines, shapes, text, and also rendering source images onto the canvas, that is taking some image file and having it render as a rectangular area within the canvas. The so-called compositing mode of the canvas refers to the relationship between the existing pixels on the canvas and what you're newly drawing on top of it. In the default mode, simply every draw operation just draws on top of whatever exists, but other compositing modes have different behaviors. When working with the canvas, it's possible to transform the coordinate grid, that is to scale the grid up or down to rotate it or to translate it up, down, left, or right. Doing this, transforming the coordinates can be useful when you want to draw to different locations in the canvas or draw different sizes or to rotate what you're drawing, which is in fact the only way you can draw a source image onto the canvas that is rotated. You have to transform the coordinates to do so. We'll also discuss how you can directly read and write the pixels that make up the canvas, like if you want to read the actual color values as numbers and or manipulate them, you can do so with certain methods. Lastly, we'll discuss some techniques for smoothly rendering animations in the canvas, and also we'll discuss some performance considerations.