Canvas support in Opera Presto 2.9

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

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


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


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.


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


Member Support
addStopColor(offset, color) Yes


Member Support
// no members N/A


Member Support
width Yes


Member Support
createImageData() Yes
width Yes
height Yes


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


Opera Help

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