 The HTML Canvas element is a rectangular element in the page to which we can draw using JavaScript. The Canvas element was first introduced in the WebKit engine back in 2004, and it's later been adopted by all the browsers, including Internet Explorer, at least since version 8 and up. Originally, the Canvas only supported 2D graphics drawing operations. More recently, 3D support has been added in the form of what's called WebGL, which is basically the Web version of OpenGL, though the support is only found in Firefox, Chrome, and Safari, but not actually in IE. And in fact, in Safari, I believe it's not enabled by default. And unfortunately at this time, it's not clear whether Microsoft will actually even ever implement WebGL into Internet Explorer or not. So it's not totally clear yet whether 3D graphics in the browser really has a future. In any case, 3D graphics is definitely a topic you approach after you already understand doing some basic 2D graphics programming. So we're not going to discuss WebGL at all. This is strictly about the 2D Canvas drawing. The performance of the Canvas element has gotten significantly better in recent years, mainly because the browsers, even including Internet Explorer, now support hardware acceleration. Still, there is quite a bit of performance overhead given that you are programming JavaScript in the browser. So it's certainly not up to par with the performance you'd get programming in CRC++, like say if you were creating a graphically intensive game, though the Canvas performance now is quite adequate for at least less graphically intensive games. Most computer images are represented as what are called raster images, a.k.a. bitmaps. In a bitmap, the image is effectively represented as a two-dimensional grid of colors, which is why when you zoom in on an image or scale it up, you begin to see the individual color elements that make up that grid, and these individual elements are called the pixels, the term pixel being a contraction of picture and element. Now, while it's common to depict pixels as if they are little squares of solid color, it's more proper to think of them as discrete points of a particular color, not actual squares or even rectangles or circles or any other shape, it's just a singular point. This distinction can be significant because if you look at an actual display device, the pixels in the display, such as your monitor, are not actually themselves square, and they're usually made up of three separate lights, one red, one green, and one blue. Red, green, and blue, a.k.a. RGB, are the additive primary colors. What you learned in kindergarten as the primary colors, those are the subtractive primary colors because when you have materials which reflect light, those are the three colors you use to mix to get any other color. But when you're talking about actual waves of light, such as emitted from a light source like the picture elements in your monitor, then the primary colors which you mix together to produce any other color are red, blue, and green rather than yellow. As you can see here, how the red, green, and blue lights of each pixel get arranged that can vary from one display to the other. In most CRT displays, cathode ray tube displays, the old bulky monitors, the RGB elements, the so-called sub-pixels were arranged in a triangular pattern, whereas in contrast for most LCDs, the sub-pixels are simply arranged in a neat rectangle. And in this bottom-right example, it may appear to you that the pixels are wider than they are tall, but you'll note that there is a bit more space between the pixels vertically than there is horizontally. So in fact, if you measure, it turns out that the pixels are exactly as tall as they are wide. And that is the usual case where pixels have a one-to-one aspect ratio. The pixels are the same height as they are wide. In some displays, however, that's not the case. So you'll hear people talking about a pixel aspect ratio of a display. Computer monitors, at least, have always pretty much been one-to-one. With older televisions, though, this was not the case. What's called sub-pixel rendering is simply any image rendering that takes account for the actual layout of the sub-pixels in the display. So in contrast to naively assuming that the actual pixel elements of your display are just neat little rectangles that can display any color, a sub-pixel rendering technique takes into account the actual arrangement of the sub-pixels. Sub-pixel rendering is most commonly associated with the rendering of text. Even with quite high resolution displays like 1080p, it may not be sufficient resolution to fully accurately represent some text rendered at a certain font size at a certain location on the screen because of the way that the text may not line up perfectly with the grid of pixels. So again, the idea in sub-pixel rendering is that if we count for the actual locations of the sub-pixels that make up each pixel, we might construct something that appears to be a more accurate rendering of the text. So here, for example, we've zoomed in on some text which is meant to be rendered as white. And of course, to render a white pixel, the RGB components of that pixel are all set to their maximum intensity. Recall from Science class that a ray of white light contains all other colors in a manner of speaking. In any case, if we were rendering this text without sub-pixel rendering, we may account for jitter by having some pixels split the difference between the full whiteness of the text and the black background. So we'd have some gray pixels around the edges. With sub-pixel rendering, however, the surprising thing is that some of those adjacent pixels may not just be grayscale, they may be set to some seemingly totally unrelated color, such as a shade of red or green. You can see a few examples of this here. Like, say, if you look at the top right of the letter A, the stem of the A is made up of a column of six pixels where the RGB are all set to max intensity or near-max intensity. But just above the stem, you can see one pixel where the red is about at half intensity and then the green and the blue are nearly totally dark. So, considered all by itself, that single pixel is set to a dark red color even though we are rendering white text on black. Remember, though, that this is an intense magnification. In practice, most users wouldn't perceive that there's anything other than just white in this text. The reason that sub-pixel rendering sets this one pixel to a shade of red rather than some shade of white, though, is because, as you can see, the red sub-pixel is on the left. And so, if that's at half intensity and the green and blue are near dark, that creates here a better contour for the text. And it turns out that most people can't really perceive the color distortion introduced here. They would just perceive this as being basically white text. On the other hand, some people do genuinely object to the general look of sub-pixel rendered text, not because of color distortion, but more because it makes, in some people's eyes, it makes the text look blurrier. So, in Windows, for example, there's an option for turning off sub-pixel rendering of text, what's called clear type in Windows. So, if you enable clear type, sub-pixel rendering is on. If you disable it, then it's off. Be clear that, while sub-pixel rendering is most closely associated with making text look better, sometimes the idea is applied to more general graphics, particularly, say, rendering of simple shapes like straight lines. It can be an effective technique. Now, in contrast to bitmap, a.k.a. raster graphics, raster, by the way, comes from Latin, meaning to rake, because it refers to the way in which, particularly in a CRT, there's a scan line gun that goes line by line through the pixels, setting all of their colors. That's why it's called raster graphics. But, anyway, in contrast to raster graphics, there are what are called vector graphics. The idea in vector graphics is that an image is described in terms of connected points within a coordinate system. So, imagine like you connect the dots picture. You can see where the dots are located and which ones connect to which, and that's how you represent your image. Now, be clear, we're just talking about the actual representation of the image as data. When it comes time to actually display an image on a display device in LCD monitor, well, then that vector image has to be translated into a raster image, a bitmap. The great virtue of a vector image, however, is that if we wish to scale an image up or down, we don't lose any detail. The connections between the points are described in lines or mathematically described curves. And, of course, when you zoom in on a mathematical line or curve, you don't get pixelation because they are perfectly continuous. Now, there actually is such a thing as a vector display, which is basically a kind of CRT. But, whereas in a conventional CRT, the electron gun scans line by line, always hitting every single color element of the display. In a vector display, the electron gun actually traces directly to form lines, either curved or straight. So it doesn't go neatly line by line. The great limitation of these vector graphics displays is they really can't do more than one color. I think in some cases they had vector displays where there was two layers of phosphor, the stuff that glows when the electron gun scans over it. So in those cases, you can get a two-color vector display. But then the other great limitation is that you really can't render filled in shapes. You can only render the outlines of shapes. You can trace their outline. So vector displays were used briefly in the 70s and 80s, and they're just not really relevant these days anymore.