HTML5 canvas faster fillText() vs drawImage()

Question

I have a digital clock that is running and being updated every 10 milliseconds. In each draw call I am using this:

    var gradient = clockContext.createLinearGradient(0, 0, 0, this.digitWidth);
    gradient.addColorStop(0.15, "rgb(255, 252, 52)");
    gradient.addColorStop(0.15, "rgb(245, 127, 26)");
    gradient.addColorStop(1, "rgb(248, 159, 52)");
    clockContext.fillStyle = gradient;
    clockContext.lineWidth = 1;
    clockContext.lineStyle = "#000000";
    clockContext.fillText(time, (this.digitWidth * i) + e + s, 46);
    clockContext.strokeText(time, (this.digitWidth * i) + e + s, 46);

Now is this quicker or slow than creating a PNG of the numbers 0 - 9, caching each one and then using drawImage() on each draw call?

Answer 1

drawImage is always, always faster than fillText . It can be 100+ times faster depending on how the text is constructed.

I did a meandering analysis here not long ago:

http://simonsarris.com/blog/322-canvas-drawtext-considered-harmful

Here's a simple jsperf example: http://jsperf.com/image-vs-text