CODEWITHSUNDEEP
javascripthtmlcanvas
Shouvik
Shouvik

Reputation: 11720

text based countdown on canvas

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.

Upvotes: 0

Views: 1502

Answers (3)

user372551
user372551

Reputation: 

$(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

Upvotes: 2

andrewmu
andrewmu

Reputation: 14534

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.

Upvotes: 1

Deniz Dogan
Deniz Dogan

Reputation: 26227

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

Upvotes: 0

Related Questions