Canvas

The canvas element enables rendering of graphics on a resolution-dependent bitmap canvas.To draw on the canvas, “contexts” are used, such as the Canvas 2D context, specified in the HTML Canvas 2D Context specification. Windows Internet Explorer 9 introduced support for the canvas element, using the 2D Canvas drawing API as its context. (In Internet Explorer 9, the Canvas 2D context is represented by the CanvasRenderingContext2D object or the ICanvasRenderingContext2D interface.) Like all the graphics in Internet Explorer 9, canvas is hardware-accelerated by using Windows and the GPU.

Canvas enables drawing scenarios that include rectangles, paths, lines, fills, arcs, and Bézier and quadratic curves. In addition, the canvas element in Internet Explorer 9 supports the width and height attributes. (The default values for width and height are 300 and 150 pixels, respectively, and the default color is transparent black.)

Canvas is a way to program graphics on the web. The canvas tag is an “immediate mode” (drawing commands are sent directly to the graphics hardware), two-dimensional drawing surface that you can use to deliver real-time graphs, animations, or interactive games without having to download a separate plug-in. Because of APIs defined by the CanvasRenderingContext2D object, canvas enables the following drawing scenarios that include:

You can use JavaScript to animate canvas drawings or make interactive experiences that can react to keyboard input, mouse clicks, or any browser event. For instance, this example on the Internet Explorer Test Drive site produces, with just a few lines of JavaScript, randomly placed and colored glowing lines.

Internet Explorer 9 and later versions support the following Canvas 2D Context APIs (members exposed by the CanvasRenderingContext2D object):

the msImageSmoothingEnabled property for choosing between either traditional bilinear scaling or nearest-neighbor scaling when enlarging small images.

support for the even-odd fill rule value in the canvas fill, clip, and isPointInPath methods. In addition to the W3C standard fill rule attributes, IE11 offers msFillRule, a global fill rule property. This sets the fill rule across all methods, rather than individually setting the fill rule for each.