Canvas

Artigo
10/20/2016

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 canvas property (back reference to the canvas object)
state methods ( save, restore)
transformation methods ( scale, rotate, translate, transform, setTransform)
compositing properties ( globalAlpha, globalCompositeOperation)
color and style properties ( strokeStyle, fillStyle)
the CanvasGradient object and methods ( addColorStop, createLinearGradient, createRadialGradient)
the CanvasPattern object and method ( createPattern)
line attributes ( lineWidth, lineCap, lineJoin, miterLimit)
Internet Explorer 11 adds line attributes (setLineDash,getLineDash, lineDashOffset)
shadow attributes ( shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur)
rectangle methods ( clearRect, fillRect, strokeRect)
complex shapes methods ( beginPath, moveTo, closePath, lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc, rect, fill, stroke, clip, isPointInPath)
the TextMetrics interface ( CanvasTextMetrics object), its property ( width) and text methods and attributes ( font, textAlign, textBaseline, fillText, strokeText, measureText)
the images method ( drawImage)
the ImageData interface ( CanvasImageData object), its properties ( data, height, and width) and pixel manipulation methods ( createImageDataas, getImageData, putImageData)
IE11 adds properties (msFillRule, msImageSmoothingEnabled)
the CanvasPixelArray object and its property, length

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.