Adaptado de um exemplo retirado das especificações para a HTML5
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
var lastX = ctx.canvas.width * Math.random();
var lastY = ctx.canvas.height * Math.random();
var hue = 0;
function line() {
ctx.save();
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
ctx.scale(0.9, 0.9);
ctx.translate(-ctx.canvas.width/2, -ctx.canvas.height/2);
ctx.beginPath();
ctx.lineWidth = 2 + Math.random() * 10;
ctx.moveTo(lastX, lastY);
lastX = ctx.canvas.width * Math.random();
lastY = ctx.canvas.height * Math.random();
ctx.arc(ctx.canvas.width * Math.random(),
ctx.canvas.height * Math.random(),
Math.random() * 30,
0, 2*Math.PI,
true);
hue = hue + 10 * Math.random();
ctx.fillStyle = 'hsl(' + hue + ', 50%, 50%)';
ctx.shadowColor = 'white';
ctx.shadowBlur = 5;
ctx.fill();
ctx.restore();
}
setInterval(line, 50);
function blank() {
ctx.fillStyle = 'rgba(0,0,0,0.1)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
setInterval(blank, 40);
</script>
canvas {border:2px solid #ff0;}
<canvas id="quadro" width="400" height="200"> <p>Conteúdo alternativo para navegadores que não suportam canvas.</p> </canvas>