Preparation code

<canvas id="c0" width="300" height="300" style="display:none;"></canvas>

<img width="300" height="300" style="border:2px solid #66ff66;position:absolute;left:100px;top:100px;">

<canvas id="c1" width="300" height="300" style="border:2px solid #ffff66;position:absolute;left:150px;top:150px;"></canvas>

<canvas id="c2" width="300" height="300" style="border:2px solid #66ffff;position:absolute;left:200px;top:200px;"></canvas>

<script>
var $ = function (q) { return document.querySelector(q); };

var canvas0 = $('#c0');var context0 = canvas0.getContext('2d');
var canvas1 = $('#c1');var context1 = canvas1.getContext('2d');
var canvas2 = $('#c2');var context2 = canvas2.getContext('2d');

var img = $('img');

var imgData = context0.createImageData(300, 300), pixels = imgData.data;

for (var i = 0, il = pixels.length; i < il; i += 4) {
  pixels[i + 0] = 240;
  pixels[i + 1] = 200;
  pixels[i + 2] = 200;
  pixels[i + 3] = 255;
}

context0.putImageData(imgData, 0, 0);
img.src = canvas0.toDataURL();
</script>

Preparation code output

Test runner

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

Java applet disabled.

img.style.webkitTransform = 'translateX(0)';
for (var i = 0; i < 10; i++) {
  img.style.webkitTransform = 'translateX(' + (i*10) + 'px)';
}

canvas1.style.webkitTransform = 'translateX(0)';
context1.clearRect(0, 0, 300, 300);
context1.drawImage(img, i * 10, 0);
for (var i = 0; i < 10; i++) {
  canvas1.style.webkitTransform = 'translateX(' + (i*10) + 'px)';
}

for (var i = 0; i < 10; i++) {
  context2.clearRect(0, 0, 300, 300);
  context2.drawImage(img, i * 10, 0);
}

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