text based countdown on canvas.

Question

Hi,

I would like to run a text countdown on canvas but last I checked there was no way to write text to a canvas.

I would like to know if anyone else has come-across an implementation where I could do a numerical countdown from 60 to 0 on the canvas.

Answer 1

This page suggests that it is indeed possible to write text on a canvas.

Answer 2

It is possible to draw text in canvas 2D. If you look at the w3c API documentation you can see the fillText method on context which allows you do draw text, and the font property lets you control the appearance.

Do note: not all canvas 2D implementations support the text API - I know that iOS didn't do it in the past.

Answer 3

$(function () {
    var width = 200;
    var height = 200;
    $('canvas').width(width).height(height);
    var ctx = $('canvas')[0].getContext('2d');
    var i = 60;
    (function draw() {
        with(ctx) {
            fillStyle = '#000';
            fillRect(0, 0, width, height);
            fillStyle = '#0f0';
            font = 'bold 20px Arial';
            fillText(i, 100, 50)
            fill();
        }
        if (!(i--)) return;
        setTimeout(draw, 1000);
    })();
});

see in action