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!
canvas support in OperaThe 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 |
Need help? Hit F1 anytime while using Opera to access our online help files, or go here.