canvas Support in Opera

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">
   <code>canvas</code> 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>

Two interfaces are important for the canvas element: the HTMLCanvasElement interface which is exposed by the element and the CanvasRenderingContext2D interface which is what's being returned with the getContext("2d") method call.

HTMLCanvasElement support
MemberSupportedNotes
width Yes -
height Yes -
toDataURL() Yes -
toDataURL(type) No -
getContext(context) Yes Opera supports "2d" and "opera-2dgame" as parameters.

The "opera-2dgame" parameter of the getContext() method is not guarenteed 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 support
MemberSupportedNotes
canvas Yes -
save() Yes -
restore() Yes -
scale(x, y) Yes -
rotate(angle) Yes -
translate(x, y) Yes -
transform(m11, m12, m21, m22, dx, dy) No -
setTransform(m11, m12, m21, m22, dx, dy) No -
globalAlpha Yes -
globalCompositeOperation Yes -
strokeStyle Yes -
fillStyle 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 No Support is optional.
shadowOffsetY No Support is optional
shadowBlur No Support is optional
shadowColor No Support is optional
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) No -
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) No -
putImageData(image, dx, dy) No -

Documentation

Opera Help

Need help? Hit F1 anytime while using Opera to access our online help files, or go here.