paulgorman.org

Also see my notes on Javascript.

Creating games with HTML5

The canvas element introduced in the (proposed) HTML 5 standard makes Javascript and HTML a viable alternative to browser plug-in platforms like Flash.

Some of the following examples assume the presence of jquery.

Draw a circle

<!DOCTYPE html>
<html>
<head>
<script>
function init() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(75, 75, 10, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
}
</script>
</head>
<body onload="init()">
<h1>Canvas test 01</h1>
<canvas id="canvas" width="600" height="400">
<p>Your browser doesn't support the canvas tag. Please use Firefox, Chrome, Opera, or Safari!</p>
</canvas>
</body>
</html>

Draw a pulsating circle

<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var context;
var diameter = 10;
var growing = true;
function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    return setInterval(draw, 50);
}
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#3366FF";
    context.beginPath();
    context.arc(300, 200, diameter, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    if (growing) {
        diameter += 1;
    } else {
        diameter -= 1;
    }
    if (diameter >= 200) {
        growing = false;
    }
    if (diameter <= 10) {
        growing = true;
    }
}
</script>
</head>
<body onload="init()">
<h1>Canvas test 02</h1>
<canvas id="canvas" width="600" height="400" style="border:1px #000 dotted;">
<p>Your browser doesn't support the canvas tag. Please use Firefox, Chrome, Opera, or Safari!</p>
</canvas>
</body>
</html>

Links