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):

Starting with IE11, the following Canvas 2D Context, Level 2 APIs are also supported:

  • 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.
  • the setLineDash, getLineDash, and lineDashOffset methods for creating custom stroke dash patterns.

API Reference


Samples and tutorials

How To Create 3D Graphics Using Canvas

How to map points between 2D coordinate systems

How to Create Canvas Special Effects

Sampling image colors with Canvas

How to Use Canvas to Create a Space Game

How To Choose Between SVG and Canvas

Examples of Use of SVG and Canvas

Internet Explorer Test Drive demos

Canvas Pad

Canvas Pinball

Canvas Zoom

Galactic HTML5 Performance Test

HTML5 Blizzard

Mr. Potato Gun

Particle Acceleration

IEBlog posts

Galactic: Building a 3D Solar System with HTML5

Native HTML5: First IE10 Platform Preview Available for Download

HTML5 Blizzard: Full Hardware Acceleration in Action

Debugging Common Canvas Issues

IE9 Includes Hardware Accelerated Canvas

Thoughts on when to use Canvas and SVG


HTML Canvas 2D Context

An Introduction to the HTML 5 Canvas Element

Behind the Scenes of Disney TRON: How to Build a Digital Book Site with HTML5

The Developer’s Guide to HTML5 Canvas

How to Create a Visual Library of Images in HTML5 Canvas

How to write a BrikBloc game with HTML5 SVG and Canvas

How to Build Asteroids with the Impact HTML5 Game Engine

Modernize Your HTML5 Canvas Game: Part 1, Hardware Scaling and CSS3

Modernize Your HTML5 Canvas Game: Part 2, Offline, Drag-and-Drop and File APIs

HTML5 Gaming: How to animate sprites in Canvas with EaselJS

Unleash the Power of Hardware-Accelerated HTML5 Canvas