Snakes - canvas rendering

JavaScript performance comparison

Test case created by Jake Gordon

Preparation code

<script>
  var w = 64, h = 64, dw = 10, dh = 10;
  var ctx = document.createElement('canvas').getContext('2d');
  ctx.canvas.width  = w*dw;
  ctx.canvas.height = h*dh;
  var head = null;
  for(var y = 0 ; y < h ; y++) {
    for(var x = 0 ; x < w ; x++) {
      head = { x: x, y: y, next: head }
    }
  }
  
  
</script>
    

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
render head only
ctx.clearRect(0, 0, w*dw, h*dh);
ctx.fillStyle = 'black';
ctx.fillRect(head.x * dw, head.y * dh, dw, dh);
pending…
render 100
ctx.clearRect(0, 0, w*dw, h*dh);
ctx.fillStyle = 'black';
ctx.fillRect(head.x * dw, head.y * dh, dw, dh);

ctx.fillStyle = 'red';
var segment = head, n = 100;
while(--n && (segment = segment.next)) {
  ctx.fillRect(segment.x * dw, segment.y * dh, dw, dh);
}
pending…
render all (64x64 = 4096)
ctx.clearRect(0, 0, w*dw, h*dh);
ctx.fillStyle = 'black';
ctx.fillRect(head.x * dw, head.y * dh, dw, dh);

ctx.fillStyle = 'red';
var segment = head;
while(segment = segment.next) {
  ctx.fillRect(segment.x * dw, segment.y * dh, dw, dh);
}
pending…

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

Compare results of other browsers

0 Comments