fillText And getImageData

Benchmark created by Bill Baxter on

Description

Draw some text into a canvas and read it back.

Preparation HTML

<script>
    var canvas = document.createElement('canvas');
    canvas.width = 1024;
    canvas.height = 1024;
    var ctx = canvas.getContext('2d');
    ctx.font = '12px arial,san-serif'
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
  
    var canvas2 = document.createElement('canvas');
    canvas2.width = 255;
    canvas2.height = 64;
    var ctx2 = canvas2.getContext('2d');
    ctx2.font = '12px arial,san-serif'
    ctx2.textAlign = 'center';
    ctx2.textBaseline = 'middle';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
bigCanvas
ctx.fillText('a', 8, 8);
ctx.fillText('b', 16, 8);
ctx.fillText('c', 24, 8);
var data = ctx.getImageData(0,0,24,16);
ready
smallCanvas
ctx2.fillText('a', 8, 8);
ctx2.fillText('b', 16, 8);
ctx2.fillText('c', 24, 8);
var data = ctx2.getImageData(0,0,24,16);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.