[Skip to content]

Opera

This is what Opera.com looks like when you surf with your mobile!

You can surf on Opera.com with your mobile today. All you need to do is to download and install Opera Mini.

Opera Mini works on almost every phone, and it’s free!

View full site

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 -
getContext() Yes Opera supports 2d as parameter.
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) Yes -
setTransform(m11, m12, m21, m22, dx, dy) Yes -
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 Partial - get and set values Supported by Opera within the DOM, but not yet rendered.
shadowOffsetY Partial - get and set values Supported by Opera within the DOM, but not yet rendered.
shadowBlur Partial - get and set values Supported by Opera within the DOM, but not yet rendered.
shadowColor Partial - get and set values Supported by Opera within the DOM, but not yet rendered.
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 -
font No -
textAlign No -
textBaseline No -
fillText(text, x, y) No -
fillText(text, x, y, maxWidth) No -
strokeText(test, x, y) No -
strokeText(test, x, y, maxWidth) No -
measureText(text) No -
createImageData(sw, sh) No -
CanvasGradient support
MemberSupportedNotes
addStopColor(offset, color) Yes -
CanvasPattern support
MemberSupportedNotes
// no members - -
TextMetrics support
MemberSupportedNotes
width No Opera does not support the TextMetrics interface.
ImageData support
MemberSupportedNotes
width Yes -
height Yes -
CanvasPixelArray support
MemberSupportedNotes
length Yes window.CanvasPixelArray
is undefined in Opera, i.e.,
there is no interface object.
[IndexGetter] Yes
[IndexSetter] Yes