Game Development Reference
In-Depth Information
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setTransform(1, 0, 0, 1,
Math.round((canvas.width - w) / 2),
Math.round((canvas.height - h) / 2));
// Drawing a circle
ctx.beginPath();
ctx.arc(cx, cy, rx, ry, Math.PI*2, true);
ctx.fill();
ctx.stroke();
ctx.closePath();
// Drawing a ship
ctx.drawImage(img, w*2 - 196, h*2 - 196,
img.width/2, img.height/2);
}, 1000/60);
}, false);
// -->
</script>
</head>
<body>
<canvas id="myCanvas" width="320" height="320">
Your browser does not have support for Canvas.
</canvas>
</body>
</html>
I would like to emphasize that all of the above applies to the two-dimensional context of canvas. In 2011,
we saw the spread of a three-dimensional context, also known as WebGL, which allows adding three-
dimensional scenes to a browser natively and manipulating these using JavaScript.
Table 10-2.
Canvas (basic support): Method of generating fast, dynamic graphics using JavaScript
IE
Firefox
Safari
Chrome
Opera
Two versions back
7.0
5.0
4.0
12.0
11.0
Previous version
8.0
6.0
5.0
13.0
11.1
Current
7.0
5.1
14.0
11.5
9.0
Near future
8.0
15.0
12.0
6.0
Farther future
10.0
9.0
16.0
12.1
