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

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

Canvas

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

Specification

HTML Canvas 2D Context

Related topics

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

 

 

Show:
© 2014 Microsoft