The Canvas API provides an object that is used for drawing, rendering, and manipulating images and graphics on a document. The
<canvas> element. The
canvas object provides the surface on which to apply graphics and images. It is not rendered by itself. To draw on the canvas, “contexts” are used, as specified in the W3C HTML Canvas 2D Context spec. The actual drawing is done using the
CanvasRenderingContext2D object, which provides the properties and methods that are used to create and manipulate graphics on a canvas object.
New in Microsoft Edge (EdgeHTML 13) is support for
HTML Canvas 2D Context, Level 2 specifications, including:
- Compositing and Blending using the
globalCompositeOperationattribute to set the current compositing and blending operator. See the
globalCompositeOperationattribute for a full list of canvas compositing modes, such as
lighter, as well as canvas blend modes, including
- The Canvas
ellipsemethod is also now supported in Microsoft Edge (build 10547+) to draw arcs on a 2D canvas drawing surface. With
ellipse, you can add points to a path that represents an ellipse -- equivalent to the arc method when the two radii are equal.
Sample code for drawing an ellipse
var canvas = document.getElementById("canvas"); var foo = canvas.getContext("2d"); foo.beginPath(); foo.ellipse(100, 70, 50, 85, 55 * Math.PI/180, 0, 2 * Math.PI); foo.stroke();
Canvas enables drawing scenarios that include rectangles, paths, lines, fills, arcs, and Bézier and quadratic curves. In addition, the Canvas API supports animations, photo compositions, and real-time video rendering. The
<canvas> element is also used by WebGL to do hardware-accelerated 3D graphics on web pages. The
<canvas> element has only two attributes,
height attributes. Both are optional and set using DOM properties with default values for width and height set to 300 and 150 pixels, respectively. The default color is transparent black, but
<canvas> can be styled just like any normal image (margin, border, background, etc). Styling does not affect the actual drawing on the canvas.
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: rectangles, lines, fills, arcs, shadows, Bézier curves, quadratic curves, images, and video.
The following Canvas 2D Context, Level 2 APIs are supported by Microsoft Edge:
msImageSmoothingEnabledproperty for choosing between either traditional bilinear scaling or nearest-neighbor scaling when enlarging small images.
- support for the
even-oddfill rule value in the canvas
isPointInPathmethods. 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.
lineDashOffsetmethods for creating custom stroke dash patterns.