Opera: Canvas support in Opera Presto 2.8

Canvas support in Opera Presto 2.8

W3C reference: W3C HTML5 Section 4.8.11 The <canvas> element

Opera articles: Blob Sallad - canvas tag and JavaScript physics simulation experiment; Creating an HTML5 canvas painting application; Creating pseudo 3D games with HTML5 canvas and raycasting; HTML5 canvas - the basics; SVG or Canvas? Choosing between the two

On this page...: Interfaces; HTMLCanvasElement; CanvasRenderingContext2D; CanvasGradient

Opera Presto offers support for the HTML5 <canvas> element. The <canvas> element enables a bitmap drawing API in HTML. It can be considered the scripted version of the <img> element. To draw a simple green square you would use the following code:

<!doctype html>
<html>
   <head>
      <title>&lt;canvas> demo</title>
      <style> canvas { border:solid } </style>
   </head>
   <body>
      <p><canvas width="150" height="200">
         &lt;canvas> element not supported.
         </canvas></p>
      <script type="text/javascript">
         var canvas = document.getElementsByTagName("canvas"),
            context = canvas.getContext("2d")
            context.fillStyle = "lime"
            context.fillRect(0, 0, 150, 200)
      </script>
    </body>
</html>

Interfaces

Two interfaces are important for the <canvas> element, and are defined in the following two data tables:

HTMLCanvasElement: This interface is exposed by the element.
CanvasRenderingContext2D: This interface is what is being returned with the getContext("2d") method call.

HTMLCanvasElement

Member	Comment	Support
`width`		Yes
`height`		Yes
`toDataURL()`		Yes
`getContext(context)`	Opera Presto supports 2d and opera-2dgame as parameters.	Yes

Note: The "opera-2dgame" parameter of the getContext() method is not guaranteed to be supported in future versions of Opera and should be considered experimental. Similar functionality to what it exposes has been added to the <canvas> specification based on feedback from Opera, and Opera will add support for those new methods in due course.

`CanvasRenderingContext2D`

Member	Support
`canvas`	Yes
`save()`	Yes
`restore()`	Yes
`scale(x, y)`	Yes
`rotate(angle)`	Yes
`translate(x, y)`	Yes
`transform(m11, m12, m21, m22, dx, dy)`	Yes
`setTransform(m11, m12, m21, m22, dx, dy)`	Yes
`globalAlpha`	Yes
`globalCompositeOperation`	Yes
`strokeStyle`	Yes
`fillStyle`	Yes
`createImageData()`	Yes
`createLinearGradient(x0, y0, x1, y1)`	Yes
`createRadialGradient(x0, y0, r0, x1, y1, r1)`	Yes
`createPattern(image, repetition)`	Yes
`lineWidth`	Yes
`lineCap`	Yes
`lineJoin`	Yes
`miterLimit`	Yes
`shadowOffsetX`	Yes
`shadowOffsetY`	Yes
`shadowBlur`	Yes
`shadowColor`	Yes
`clearRect(x, y, w, h)`	Yes
`fillRect(x, y, w, h)`	Yes
`strokeRect(x, y, w, h)`	Yes
`beginPath()`	Yes
`closePath()`	Yes
`moveTo(x, y)`	Yes
`lineTo(x, y)`	Yes
`quadraticCurveTo(cpx, cpy, x, y)`	Yes
`bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)`	Yes
`arcTo(x1, y1, x2, y2, radius)`	Yes
`rect(x, y, w, h)`	Yes
`arc(x, y, radius, startAngle, endAngle, anticlockwise)`	Yes
`fill()`	Yes
`stroke()`	Yes
`clip()`	Yes
`isPointInPath(x, y)`	Yes
`drawImage(image, dx, dy)`	Yes
`drawImage(image, dx, dy, dw, dh)`	Yes
`drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)`	Yes
`getImageData(sx, sy, sw, sh)`	Yes
`putImageData(image, dx, dy)`	Yes
`textAlign`	Yes
`textBaseline`	Yes
`fillText`	Yes
`strokeText`	Yes
`measureText`	Yes

`CanvasGradient`

Member	Support
`addStopColor(offset, color)`	Yes

CanvasPattern

Member	Support
`// no members`	N/A

TextMetrics

Member	Support
`width`	Yes

ImageData

Member	Support
`createImageData()`	Yes
`width`	Yes
`height`	Yes

CanvasPixelArray

Member	Support
`length`	Yes
`[IndexGetter]`	Yes
`[IndexSetter]`	Yes