hellofooninjabarworld

My first fiddle

by mrcoles

HTML

<canvas id="c" width="500" height="300">
    <h1>Hello World!</h1>
    <p>Try this in a browser that supports the canvas element!</p>
</canvas>

CSS

#c {
    cursor: pointer;
}

JavaScript

var $canvas = $('#c'),
    canvas = $canvas.get(0),
    ctx = canvas.getContext('2d'),
    width = $canvas.width(),
    height = $canvas.height(),
    world = new Image(),
    text = 'Hello World!',
    first = true;

world.src = 'http://www.csuohio.edu/business/nasbite/html/assets/images/earth_animated.gif';

ctx.fillStyle = '#eef';
ctx.fillRect(0, 0, width, height);
ctx.font = 'bold 80px/100px Helvetica, Arial';

function randInt(a, b) {
    return a + Math.floor(Math.random() * (1 + b - a));
}

function randHex() {
    return randInt(0, 16).toString(16);
}

function doText(text, offset) {
    offset = offset || 0;
    ctx.fillStyle = '#' + randHex() + randHex() + randHex();
    ctx.fillText(text, 10 + offset, height / 2 + 30 + offset);
}

function animate(x, y, first) {
    if (!first) ctx.drawImage(world, x - 50, y - 50);
    doText(text);
    doText(text, 4);
}

$canvas.click(function(evt) { 
    var offset = $canvas.offset();
    animate(evt.pageX - offset.left, evt.pageY - offset.top);
});

(function go() {
    animate(randInt(0, width), randInt(0, height), first);
    first = false;
    window.setTimeout(go, 300);
})();