Canvas Draw Tests

JavaScript performance comparison

Test case created by Matt Palmerlee and last updated

Preparation code

<script>
  ColorRGBA = function(r, g, b, a) {
    if (typeof r == "undefined") r = NextRandom(0, 256);
    if (typeof g == "undefined") g = NextRandom(0, 256);
    if (typeof b == "undefined") b = NextRandom(0, 256);
    if (typeof a == "undefined") a = NextRandom(0, 256);
    this.r = r; //red
    this.g = g; //green
    this.b = b; //blue
    this.a = a; //alpha
  };

  ColorRGBA.prototype.toString = function() {
    return 'rgba(' + this.r + ', ' + this.g + ', ' + this.b + ', ' + this.a + ')';
  };

  NextRandom = function(lowInclusive, highExclusive) {

    if (highExclusive === null || typeof highExclusive == "undefined") {
      highExclusive = lowInclusive;
      lowInclusive = 0;
    }

    if (lowInclusive < 0) highExclusive += Math.abs(lowInclusive);
    else highExclusive -= lowInclusive;

    return Math.floor(Math.random() * highExclusive) + lowInclusive;
  };
</script>
<canvas id="testCanvas" width="400" height="300" style="background-color:black">
  Sorry your browser doesn't support the HTML5 canvas!
</canvas>
      
<script>
Benchmark.prototype.setup = function() {
  var canvasElm = document.getElementById("testCanvas");
  document.ctx = canvasElm.getContext("2d");
  
  document.colorPallet = [];
  for (var i = 0; i < 100; i++) {
    document.colorPallet.push(new ColorRGBA().toString());
  }
  
  document.currColorIndex = 0;
  
  document.testImage = new Image();
  document.testImage.src = 'http://www.mattpalmerlee.com/resources/canvas_speed_tests/ball.png';

};

Benchmark.prototype.teardown = function() {
  document.currColorIndex++;
  if (document.currColorIndex >= document.colorPallet.length - 3) {
    document.currColorIndex = 0;
  }

};
</script>

Preparation code output

<canvas id="testCanvas" width="400" height="300" style="background-color:black"> Sorry your browser doesn't support the HTML5 canvas! </canvas>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Radial Gradient
var ctx = document.ctx;
var width = 64; //NextRandom(1, 100);
var height = 64; //width;
var x = NextRandom(width / 2, 400 - width / 2);
var y = NextRandom(height / 2, 300 - height / 2);

var radgrad = ctx.createRadialGradient(x, y, 1, x, y, width / 2);


radgrad.addColorStop(0, document.colorPallet[document.currColorIndex]);
radgrad.addColorStop(0.5, document.colorPallet[document.currColorIndex + 1]);
radgrad.addColorStop(0.9, document.colorPallet[document.currColorIndex + 2]);

radgrad.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = radgrad;

ctx.fillRect(x - width, y - height, width * 2, height * 2);
pending…
Arc (Circle)
var ctx = document.ctx;
var width = 64; //NextRandom(1, 100);
var height = 64; //width;
var x = NextRandom(width / 2, 400 - width / 2);
var y = NextRandom(height / 2, 300 - height / 2);

ctx.strokeStyle = document.colorPallet[document.currColorIndex];
ctx.fillStyle = document.colorPallet[document.currColorIndex + 1];
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(x, y, width / 2, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
pending…
Image
var ctx = document.ctx;
var width = 64; //NextRandom(1, 100);
var height = 64; //width;
var x = NextRandom(width / 2, 400 - width / 2);
var y = NextRandom(height / 2, 300 - height / 2);

ctx.drawImage(document.testImage, x - width/2, y - height/2);
pending…

Compare results of other browsers

Revisions

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

0 Comments

Sorry your browser doesn't support the HTML5 canvas!