Random Text with Canvas

HTML5 canvas demo

by ian_smithz

HTML

<canvas id="myCanvas" width="500" height="400" />

JavaScript

var canvas, ctx;
var drawTimer, clearTimer;
var width, height;

$(document).ready(function() {
    canvas = document.getElementById('myCanvas');
    width = canvas.width;
    height = canvas.height;
    ctx = canvas.getContext('2d');
    
    drawTimer = window.setInterval(draw, 50);
    clearTimer = window.setInterval(clear, 60);
});

function draw() {
   var fontSize = Math.random() * 50;
   var x = Math.random() * canvas.width;
   var y = Math.random() * canvas.height;
   var r = Math.floor(Math.random() * 255) + 50;
   var g = Math.floor(Math.random() * 255) + 50;
   var b = Math.floor(Math.random() * 255) + 50;

   var color = 'rgba(' + r + ',' + g + ',' + b +',1.0)';
   ctx.fillStyle = color;
   ctx.font = fontSize + 'pt Arial';
   ctx.fillText('Hello World', x, y);
}                                     
                                     
function clear() {
   ctx.fillStyle = 'rgba(255,255,255,0.1)';
   ctx.fillRect(0, 0, width, height);
 }