Added framework for canvas benchmark and two examples that stress drawImage. One example draws multiple instances of a single image while the other draws multiple images.
Review URL: https://chromiumcodereview.appspot.com/9355020
git-svn-id: http://src.chromium.org/svn/trunk/deps/canvas_bench@122605 4ff67af0-8c30-449e-8e8b-ad334ec8d88c
diff --git a/bench.js b/bench.js
new file mode 100644
index 0000000..c20db6c
--- /dev/null
+++ b/bench.js
@@ -0,0 +1,29 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var bench = (function() {
+ var rafFunc;
+ var drawFunc;
+
+ function tick() {
+ drawFunc();
+ rafFunc(tick);
+ };
+
+ function startAnimation() {
+ rafFunc = window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame;
+ rafFunc(tick);
+ };
+
+ var bench = {};
+ bench.run = function(df) {
+ drawFunc = df;
+ startAnimation();
+ };
+ return bench;
+})();
diff --git a/many_images.html b/many_images.html
new file mode 100644
index 0000000..f2a8539
--- /dev/null
+++ b/many_images.html
@@ -0,0 +1,443 @@
+<html>
+<head>
+<title>Canvas - Many Images</title>
+<style>
+ #sprite-cache {
+ visibility: hidden;
+ }
+</style>
+<script type="text/javascript" src="bench.js"></script>
+<script type="text/javascript" src="sprites.js"></script>
+<script type="text/javascript">
+window.onload = init;
+
+var NUM_SPRITES = 2000;
+var canvas;
+var context;
+
+function init() {
+ canvas = document.getElementById('canvas');
+ context = canvas.getContext('2d');
+
+ sprites.init(canvas.width, canvas.height);
+ var images = document.getElementById('sprite-cache').children;
+ for (var i = 0, numImages = images.length; i < NUM_SPRITES; ++i) {
+ sprites.add(images[i % numImages]);
+ };
+
+ bench.run(draw);
+};
+
+function draw() {
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ sprites.draw(context);
+};
+</script>
+</head>
+
+<body>
+ <canvas id="canvas" width="800" height = "600">
+ <div id="sprite-cache">
+ <img src="images/image1_t.png" />
+ <img src="images/image2_t.png" />
+ <img src="images/image3_t.png" />
+ <img src="images/image4_t.png" />
+ <img src="images/image5_t.png" />
+ <img src="images/image6_t.png" />
+ <img src="images/image7_t.png" />
+ <img src="images/image8_t.png" />
+ <img src="images/image9_t.png" />
+ <img src="images/image10_t.png" />
+ <img src="images/image11_t.png" />
+ <img src="images/image12_t.png" />
+ <img src="images/image13_t.png" />
+ <img src="images/image14_t.png" />
+ <img src="images/image15_t.png" />
+ <img src="images/image16_t.png" />
+ <img src="images/image17_t.png" />
+ <img src="images/image18_t.png" />
+ <img src="images/image19_t.png" />
+ <img src="images/image20_t.png" />
+ <img src="images/image21_t.png" />
+ <img src="images/image22_t.png" />
+ <img src="images/image23_t.png" />
+ <img src="images/image24_t.png" />
+ <img src="images/image25_t.png" />
+ <img src="images/image26_t.png" />
+ <img src="images/image27_t.png" />
+ <img src="images/image28_t.png" />
+ <img src="images/image29_t.png" />
+ <img src="images/image30_t.png" />
+ <img src="images/image31_t.png" />
+ <img src="images/image32_t.png" />
+ <img src="images/image33_t.png" />
+ <img src="images/image34_t.png" />
+ <img src="images/image35_t.png" />
+ <img src="images/image36_t.png" />
+ <img src="images/image37_t.png" />
+ <img src="images/image38_t.png" />
+ <img src="images/image39_t.png" />
+ <img src="images/image40_t.png" />
+ <img src="images/image41_t.png" />
+ <img src="images/image42_t.png" />
+ <img src="images/image43_t.png" />
+ <img src="images/image44_t.png" />
+ <img src="images/image45_t.png" />
+ <img src="images/image46_t.png" />
+ <img src="images/image47_t.png" />
+ <img src="images/image48_t.png" />
+ <img src="images/image49_t.png" />
+ <img src="images/image50_t.png" />
+ <img src="images/image51_t.png" />
+ <img src="images/image52_t.png" />
+ <img src="images/image53_t.png" />
+ <img src="images/image54_t.png" />
+ <img src="images/image55_t.png" />
+ <img src="images/image56_t.png" />
+ <img src="images/image57_t.png" />
+ <img src="images/image58_t.png" />
+ <img src="images/image59_t.png" />
+ <img src="images/image60_t.png" />
+ <img src="images/image61_t.png" />
+ <img src="images/image62_t.png" />
+ <img src="images/image63_t.png" />
+ <img src="images/image64_t.png" />
+ <img src="images/image65_t.png" />
+ <img src="images/image66_t.png" />
+ <img src="images/image67_t.png" />
+ <img src="images/image68_t.png" />
+ <img src="images/image69_t.png" />
+ <img src="images/image70_t.png" />
+ <img src="images/image71_t.png" />
+ <img src="images/image72_t.png" />
+ <img src="images/image73_t.png" />
+ <img src="images/image74_t.png" />
+ <img src="images/image75_t.png" />
+ <img src="images/image76_t.png" />
+ <img src="images/image77_t.png" />
+ <img src="images/image78_t.png" />
+ <img src="images/image79_t.png" />
+ <img src="images/image80_t.png" />
+ <img src="images/image81_t.png" />
+ <img src="images/image82_t.png" />
+ <img src="images/image83_t.png" />
+ <img src="images/image84_t.png" />
+ <img src="images/image85_t.png" />
+ <img src="images/image86_t.png" />
+ <img src="images/image87_t.png" />
+ <img src="images/image88_t.png" />
+ <img src="images/image89_t.png" />
+ <img src="images/image90_t.png" />
+ <img src="images/image91_t.png" />
+ <img src="images/image92_t.png" />
+ <img src="images/image93_t.png" />
+ <img src="images/image94_t.png" />
+ <img src="images/image95_t.png" />
+ <img src="images/image96_t.png" />
+ <img src="images/image97_t.png" />
+ <img src="images/image98_t.png" />
+ <img src="images/image99_t.png" />
+ <img src="images/image100_t.png" />
+ <img src="images/image101_t.png" />
+ <img src="images/image102_t.png" />
+ <img src="images/image103_t.png" />
+ <img src="images/image104_t.png" />
+ <img src="images/image105_t.png" />
+ <img src="images/image106_t.png" />
+ <img src="images/image107_t.png" />
+ <img src="images/image108_t.png" />
+ <img src="images/image109_t.png" />
+ <img src="images/image110_t.png" />
+ <img src="images/image111_t.png" />
+ <img src="images/image112_t.png" />
+ <img src="images/image113_t.png" />
+ <img src="images/image114_t.png" />
+ <img src="images/image115_t.png" />
+ <img src="images/image116_t.png" />
+ <img src="images/image117_t.png" />
+ <img src="images/image118_t.png" />
+ <img src="images/image119_t.png" />
+ <img src="images/image120_t.png" />
+ <img src="images/image121_t.png" />
+ <img src="images/image122_t.png" />
+ <img src="images/image123_t.png" />
+ <img src="images/image124_t.png" />
+ <img src="images/image125_t.png" />
+ <img src="images/image126_t.png" />
+ <img src="images/image127_t.png" />
+ <img src="images/image128_t.png" />
+ <img src="images/image129_t.png" />
+ <img src="images/image130_t.png" />
+ <img src="images/image131_t.png" />
+ <img src="images/image132_t.png" />
+ <img src="images/image133_t.png" />
+ <img src="images/image134_t.png" />
+ <img src="images/image135_t.png" />
+ <img src="images/image136_t.png" />
+ <img src="images/image137_t.png" />
+ <img src="images/image138_t.png" />
+ <img src="images/image139_t.png" />
+ <img src="images/image140_t.png" />
+ <img src="images/image141_t.png" />
+ <img src="images/image142_t.png" />
+ <img src="images/image143_t.png" />
+ <img src="images/image144_t.png" />
+ <img src="images/image145_t.png" />
+ <img src="images/image146_t.png" />
+ <img src="images/image147_t.png" />
+ <img src="images/image148_t.png" />
+ <img src="images/image149_t.png" />
+ <img src="images/image150_t.png" />
+ <img src="images/image151_t.png" />
+ <img src="images/image152_t.png" />
+ <img src="images/image153_t.png" />
+ <img src="images/image154_t.png" />
+ <img src="images/image155_t.png" />
+ <img src="images/image156_t.png" />
+ <img src="images/image157_t.png" />
+ <img src="images/image158_t.png" />
+ <img src="images/image159_t.png" />
+ <img src="images/image160_t.png" />
+ <img src="images/image161_t.png" />
+ <img src="images/image162_t.png" />
+ <img src="images/image163_t.png" />
+ <img src="images/image164_t.png" />
+ <img src="images/image165_t.png" />
+ <img src="images/image166_t.png" />
+ <img src="images/image167_t.png" />
+ <img src="images/image168_t.png" />
+ <img src="images/image169_t.png" />
+ <img src="images/image170_t.png" />
+ <img src="images/image171_t.png" />
+ <img src="images/image172_t.png" />
+ <img src="images/image173_t.png" />
+ <img src="images/image174_t.png" />
+ <img src="images/image175_t.png" />
+ <img src="images/image176_t.png" />
+ <img src="images/image177_t.png" />
+ <img src="images/image178_t.png" />
+ <img src="images/image179_t.png" />
+ <img src="images/image180_t.png" />
+ <img src="images/image181_t.png" />
+ <img src="images/image182_t.png" />
+ <img src="images/image183_t.png" />
+ <img src="images/image184_t.png" />
+ <img src="images/image185_t.png" />
+ <img src="images/image186_t.png" />
+ <img src="images/image187_t.png" />
+ <img src="images/image188_t.png" />
+ <img src="images/image189_t.png" />
+ <img src="images/image190_t.png" />
+ <img src="images/image191_t.png" />
+ <img src="images/image192_t.png" />
+ <img src="images/image193_t.png" />
+ <img src="images/image194_t.png" />
+ <img src="images/image195_t.png" />
+ <img src="images/image196_t.png" />
+ <img src="images/image197_t.png" />
+ <img src="images/image198_t.png" />
+ <img src="images/image199_t.png" />
+ <img src="images/image200_t.png" />
+ <img src="images/image201_t.png" />
+ <img src="images/image202_t.png" />
+ <img src="images/image203_t.png" />
+ <img src="images/image204_t.png" />
+ <img src="images/image205_t.png" />
+ <img src="images/image206_t.png" />
+ <img src="images/image207_t.png" />
+ <img src="images/image208_t.png" />
+ <img src="images/image209_t.png" />
+ <img src="images/image210_t.png" />
+ <img src="images/image211_t.png" />
+ <img src="images/image212_t.png" />
+ <img src="images/image213_t.png" />
+ <img src="images/image214_t.png" />
+ <img src="images/image215_t.png" />
+ <img src="images/image216_t.png" />
+ <img src="images/image217_t.png" />
+ <img src="images/image218_t.png" />
+ <img src="images/image219_t.png" />
+ <img src="images/image220_t.png" />
+ <img src="images/image221_t.png" />
+ <img src="images/image222_t.png" />
+ <img src="images/image223_t.png" />
+ <img src="images/image224_t.png" />
+ <img src="images/image225_t.png" />
+ <img src="images/image226_t.png" />
+ <img src="images/image227_t.png" />
+ <img src="images/image228_t.png" />
+ <img src="images/image229_t.png" />
+ <img src="images/image230_t.png" />
+ <img src="images/image231_t.png" />
+ <img src="images/image232_t.png" />
+ <img src="images/image233_t.png" />
+ <img src="images/image234_t.png" />
+ <img src="images/image235_t.png" />
+ <img src="images/image236_t.png" />
+ <img src="images/image237_t.png" />
+ <img src="images/image238_t.png" />
+ <img src="images/image239_t.png" />
+ <img src="images/image240_t.png" />
+ <img src="images/image241_t.png" />
+ <img src="images/image242_t.png" />
+ <img src="images/image243_t.png" />
+ <img src="images/image244_t.png" />
+ <img src="images/image245_t.png" />
+ <img src="images/image246_t.png" />
+ <img src="images/image247_t.png" />
+ <img src="images/image248_t.png" />
+ <img src="images/image249_t.png" />
+ <img src="images/image250_t.png" />
+ <img src="images/image251_t.png" />
+ <img src="images/image252_t.png" />
+ <img src="images/image253_t.png" />
+ <img src="images/image254_t.png" />
+ <img src="images/image255_t.png" />
+ <img src="images/image256_t.png" />
+ <img src="images/image257_t.png" />
+ <img src="images/image258_t.png" />
+ <img src="images/image259_t.png" />
+ <img src="images/image260_t.png" />
+ <img src="images/image261_t.png" />
+ <img src="images/image262_t.png" />
+ <img src="images/image263_t.png" />
+ <img src="images/image264_t.png" />
+ <img src="images/image265_t.png" />
+ <img src="images/image266_t.png" />
+ <img src="images/image267_t.png" />
+ <img src="images/image268_t.png" />
+ <img src="images/image269_t.png" />
+ <img src="images/image270_t.png" />
+ <img src="images/image271_t.png" />
+ <img src="images/image272_t.png" />
+ <img src="images/image273_t.png" />
+ <img src="images/image274_t.png" />
+ <img src="images/image275_t.png" />
+ <img src="images/image276_t.png" />
+ <img src="images/image277_t.png" />
+ <img src="images/image278_t.png" />
+ <img src="images/image279_t.png" />
+ <img src="images/image280_t.png" />
+ <img src="images/image281_t.png" />
+ <img src="images/image282_t.png" />
+ <img src="images/image283_t.png" />
+ <img src="images/image284_t.png" />
+ <img src="images/image285_t.png" />
+ <img src="images/image286_t.png" />
+ <img src="images/image287_t.png" />
+ <img src="images/image288_t.png" />
+ <img src="images/image289_t.png" />
+ <img src="images/image290_t.png" />
+ <img src="images/image291_t.png" />
+ <img src="images/image292_t.png" />
+ <img src="images/image293_t.png" />
+ <img src="images/image294_t.png" />
+ <img src="images/image295_t.png" />
+ <img src="images/image296_t.png" />
+ <img src="images/image297_t.png" />
+ <img src="images/image298_t.png" />
+ <img src="images/image299_t.png" />
+ <img src="images/image300_t.png" />
+ <img src="images/image301_t.png" />
+ <img src="images/image302_t.png" />
+ <img src="images/image303_t.png" />
+ <img src="images/image304_t.png" />
+ <img src="images/image305_t.png" />
+ <img src="images/image306_t.png" />
+ <img src="images/image307_t.png" />
+ <img src="images/image308_t.png" />
+ <img src="images/image309_t.png" />
+ <img src="images/image310_t.png" />
+ <img src="images/image311_t.png" />
+ <img src="images/image312_t.png" />
+ <img src="images/image313_t.png" />
+ <img src="images/image314_t.png" />
+ <img src="images/image315_t.png" />
+ <img src="images/image316_t.png" />
+ <img src="images/image317_t.png" />
+ <img src="images/image318_t.png" />
+ <img src="images/image319_t.png" />
+ <img src="images/image320_t.png" />
+ <img src="images/image321_t.png" />
+ <img src="images/image322_t.png" />
+ <img src="images/image323_t.png" />
+ <img src="images/image324_t.png" />
+ <img src="images/image325_t.png" />
+ <img src="images/image326_t.png" />
+ <img src="images/image327_t.png" />
+ <img src="images/image328_t.png" />
+ <img src="images/image329_t.png" />
+ <img src="images/image330_t.png" />
+ <img src="images/image331_t.png" />
+ <img src="images/image332_t.png" />
+ <img src="images/image333_t.png" />
+ <img src="images/image334_t.png" />
+ <img src="images/image335_t.png" />
+ <img src="images/image336_t.png" />
+ <img src="images/image337_t.png" />
+ <img src="images/image338_t.png" />
+ <img src="images/image339_t.png" />
+ <img src="images/image340_t.png" />
+ <img src="images/image341_t.png" />
+ <img src="images/image342_t.png" />
+ <img src="images/image343_t.png" />
+ <img src="images/image344_t.png" />
+ <img src="images/image345_t.png" />
+ <img src="images/image346_t.png" />
+ <img src="images/image347_t.png" />
+ <img src="images/image348_t.png" />
+ <img src="images/image349_t.png" />
+ <img src="images/image350_t.png" />
+ <img src="images/image351_t.png" />
+ <img src="images/image352_t.png" />
+ <img src="images/image353_t.png" />
+ <img src="images/image354_t.png" />
+ <img src="images/image355_t.png" />
+ <img src="images/image356_t.png" />
+ <img src="images/image357_t.png" />
+ <img src="images/image358_t.png" />
+ <img src="images/image359_t.png" />
+ <img src="images/image360_t.png" />
+ <img src="images/image361_t.png" />
+ <img src="images/image362_t.png" />
+ <img src="images/image363_t.png" />
+ <img src="images/image364_t.png" />
+ <img src="images/image365_t.png" />
+ <img src="images/image366_t.png" />
+ <img src="images/image367_t.png" />
+ <img src="images/image368_t.png" />
+ <img src="images/image369_t.png" />
+ <img src="images/image370_t.png" />
+ <img src="images/image371_t.png" />
+ <img src="images/image372_t.png" />
+ <img src="images/image373_t.png" />
+ <img src="images/image374_t.png" />
+ <img src="images/image375_t.png" />
+ <img src="images/image376_t.png" />
+ <img src="images/image377_t.png" />
+ <img src="images/image378_t.png" />
+ <img src="images/image379_t.png" />
+ <img src="images/image380_t.png" />
+ <img src="images/image381_t.png" />
+ <img src="images/image382_t.png" />
+ <img src="images/image383_t.png" />
+ <img src="images/image384_t.png" />
+ <img src="images/image385_t.png" />
+ <img src="images/image386_t.png" />
+ <img src="images/image387_t.png" />
+ <img src="images/image388_t.png" />
+ <img src="images/image389_t.png" />
+ <img src="images/image390_t.png" />
+ <img src="images/image391_t.png" />
+ <img src="images/image392_t.png" />
+ <img src="images/image393_t.png" />
+ <img src="images/image394_t.png" />
+ <img src="images/image395_t.png" />
+ <img src="images/image396_t.png" />
+ <img src="images/image397_t.png" />
+ <img src="images/image398_t.png" />
+ <img src="images/image399_t.png" />
+ <img src="images/image400_t.png" />
+ </div>
+</body>
+</html>
diff --git a/single_image.html b/single_image.html
new file mode 100644
index 0000000..9d21a0e
--- /dev/null
+++ b/single_image.html
@@ -0,0 +1,44 @@
+<html>
+<head>
+<title>Canvas - Single Image</title>
+<style>
+ #sprite-cache {
+ visibility: hidden;
+ }
+</style>
+<script type="text/javascript" src="bench.js"></script>
+<script type="text/javascript" src="sprites.js"></script>
+<script type="text/javascript">
+window.onload = init;
+
+var NUM_SPRITES = 2000;
+var canvas;
+var context;
+
+function init() {
+ canvas = document.getElementById('canvas');
+ context = canvas.getContext('2d');
+
+ sprites.init(canvas.width, canvas.height);
+ var image = document.getElementById('sprite-cache').children[0];
+ for (var i = 0; i < NUM_SPRITES; ++i) {
+ sprites.add(image);
+ };
+
+ bench.run(draw);
+};
+
+function draw() {
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ sprites.draw(context);
+};
+</script>
+</head>
+
+<body>
+ <canvas id="canvas" width="800" height = "600">
+ <div id="sprite-cache">
+ <img src="images/image1_t.png" />
+ </div>
+</body>
+</html>
diff --git a/sprites.js b/sprites.js
new file mode 100644
index 0000000..283c2b3
--- /dev/null
+++ b/sprites.js
@@ -0,0 +1,41 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var sprites = (function() {
+ var objs;
+ var width;
+ var height;
+ var SPRITE_SPEED = 2;
+
+ var sprites = {};
+ sprites.init = function(w, h) {
+ objs = [];
+ width = w;
+ height = h;
+ };
+ sprites.add = function(img) {
+ var obj = { img: img,
+ x: Math.random() * (width - img.width),
+ y: Math.random() * (height - img.height),
+ dx: SPRITE_SPEED * (Math.random() < .5 ? -1 : 1),
+ dy: SPRITE_SPEED * (Math.random() < .5 ? -1 : 1) };
+ objs.push(obj);
+ };
+ sprites.draw = function(context) {
+ for (var i = 0, len = objs.length; i < len; ++i) {
+ var obj = objs[i];
+
+ obj.x += obj.dx;
+ if ((obj.x > (width - obj.img.width)) || (obj.x < 0))
+ obj.dx *= -1;
+
+ obj.y += obj.dy;
+ if ((obj.y > (height - obj.img.height)) || (obj.y < 0))
+ obj.dy *= -1;
+
+ context.drawImage(obj.img, obj.x, obj.y);
+ };
+ };
+ return sprites;
+})();
