<canvas> element support in
Opera Presto 2.7
- 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>
<html>
<head>
<title><canvas> demo</title>
<style> canvas { border:solid } </style>
</head>
<body>
<p><canvas width="150" height="200">
<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 support
|
Member |
Supported |
Notes |
width |
Yes |
|
height |
Yes |
|
toDataURL() |
Yes |
|
getContext(context) |
Yes |
Opera supports 2d and opera-2dgame as parameters. |
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 support
|
Member |
Supported |
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 support
|
Member
|
Supported
|
addStopColor(offset, color)
|
Yes
|
CanvasPattern support
|
Member
|
Supported
|
// no members
|
N/A
|
TextMetrics support
|
Member
|
Supported
|
width
|
Yes
|
ImageData support
|
Member
|
Supported
|
createImageData() |
Yes |
width
|
Yes
|
height
|
Yes
|
CanvasPixelArray support
|
Member
|
Supported
|
length
|
Yes
|
[IndexGetter]
|
Yes
|
[IndexSetter]
|
Yes
|