drawimage vs render per frame (v5)

Revision 5 of this benchmark created on

Preparation HTML

<canvas id="canvas1"></canvas>
		<canvas id="canvas2"></canvas>
<script>
		(function() {
			var lastTime = 0;
			var vendors = ["ms", "moz", "webkit", "o"];
			for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
				window.requestAnimationFrame = window[vendors[x] + "RequestAnimationFrame"];
				window.cancelAnimationFrame = window[vendors[x] + "CancelAnimationFrame"] || window[vendors[x] + "CancelRequestAnimationFrame"];
			}

			if (!window.requestAnimationFrame)
				window.requestAnimationFrame = function(callback, element) {
					var currTime = new Date().getTime();
					var timeToCall = Math.max(0, 16 - (currTime - lastTime));
					var id = window.setTimeout(function() { 
						callback(currTime + timeToCall); 
					}, timeToCall);
					lastTime = currTime + timeToCall;
					return id;
				};

			if (!window.cancelAnimationFrame)
				window.cancelAnimationFrame = function(id) {
					clearTimeout(id);
				};

		}());

		var c_canvas = document.createElement("canvas");
		var c_context = c_canvas.getContext("2d");
		c_canvas.width = 100;
		c_canvas.height = 100;
		drawCircle();
		function drawCircle() {
			c_context.beginPath();
			c_context.fillStyle = 'red';
			c_context.lineWidth = 4;
			c_context.arc(50,50,35,0,2 * Math.PI, true);
			c_context.arc(150,50,35,0,2 * Math.PI, true);
			c_context.arc(250,50,35,0,2 * Math.PI, true);
			c_context.stroke();
			c_context.fill();		
		}
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
drawImage
		
		var canvas2 = document.getElementById("canvas2");
		var context2 = canvas2.getContext("2d");

		var x2 = 0;
		canvas2.width = 2000;
		canvas2.height = 100;
    var animation;
		function mainLoop2() {
			x2 += 1;
     if(x2 === 100) {
        cancelAnimationFrame(animation)
     }
			context2.clearRect(x2, 0, 200, 200);
			context2.drawImage(c_canvas, 0, 0, 100, 100, x2, 0, 100, 100);
			//animation = requestAnimationFrame(mainLoop2);
		}
		mainLoop2();
ready
render per frame
		var canvas1 = document.getElementById("canvas1");
		var context1 = canvas1.getContext("2d");
		canvas1.width = 2000;
		canvas1.height = 100;
var animation;
		var x1 = 50;
		function mainLoop1() {
			context1.clearRect(x1 - 50, 0, 200, 200);
			x1 += 1;
     if(x1 === 100) {
        cancelAnimationFrame(animation)
     }
			context1.beginPath();
			context1.fillStyle = 'red';
			context1.lineWidth = 4;
			context1.arc(x1,50,35,0,2 * Math.PI, true);
			context1.stroke();
			context1.fill();
			//animation = requestAnimationFrame(mainLoop1);
		}
		mainLoop1();
ready

Revisions

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