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><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.
| Member | Supported | Notes |
|---|---|---|
width | Yes | - |
height | Yes | - |
toDataURL() | Yes | - |
getContext() | Yes | Opera supports 2d as parameter. |
| Member | Supported | Notes |
|---|---|---|
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 | - |
| Member | Supported | Notes |
|---|---|---|
addStopColor(offset, color) | Yes | - |
| Member | Supported | Notes |
|---|---|---|
// no members | - | - |
| Member | Supported | Notes |
|---|---|---|
width | No | Opera does not support the TextMetrics interface. |
| Member | Supported | Notes |
|---|---|---|
width | Yes | - |
height | Yes | - |
| Member | Supported | Notes |
|---|---|---|
length | Yes | window.CanvasPixelArray is undefined in Opera, i.e., there is no interface object. |
[IndexGetter] | Yes | |
[IndexSetter] | Yes |
