<!DOCTYPE html>
<html>
<head>
<title>Canvas Performance Test</title>
<!--
<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
-->
<script src="../include/util.js"></script>
<script src="../include/webutil.js"></script>
<script src="../include/base64.js"></script>
<script src="../include/display.js"></script>
<script src="face.png.js"></script>
</head>
<body>
Iterations: <input id='iterations' style='width:50' value="100">
Width: <input id='width' style='width:50' value="640">
Height: <input id='height' style='width:50' value="480">
<input id='startButton' type='button' value='Do Performance Test'
style='width:150px' onclick="begin();">
<br><br>
<b>Canvas</b> (should see three squares and two happy faces):<br>
<canvas id="canvas" width="200" height="100"
style="border-style: dotted; border-width: 1px;">
Canvas not supported.
</canvas>
<br>
Results:<br>
<textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
</body>
<script>
var msg_cnt = 0;
var display, start_width = 300, start_height = 100;
var iterations;
function message(str) {
console.log(str);
cell = $D('messages');
cell.innerHTML += msg_cnt + ": " + str + "\n";
cell.scrollTop = cell.scrollHeight;
msg_cnt += 1;
}
function test_functions () {
var img, x, y, w, h, ctx = display.get_context();
w = display.get_width();
h = display.get_height();
display.fillRect(0, 0, w, h, [240,240,240]);
display.blitStringImage("data:image/png;base64," + face64, 150, 10);
var himg = new Image();
himg.onload = function () {
ctx.drawImage(himg, 200, 40); };
himg.src = "face.png";
/* Test array image data */
data = [];
for (y=0; y< 50; y++) {
for (x=0; x< 50; x++) {
data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
data[(y*50 + x)*4 + 3] = 255;
}
}
display.blitImage(30, 10, 50, 50, data, 0);
img = display.getTile(5,5,16,16,[0,128,128]);
display.putTile(img);
img = display.getTile(90,15,16,16,[0,0,0]);
display.setSubTile(img, 0,0,16,16,[128,128,0]);
display.putTile(img);
}
function begin () {
$D('startButton').value = "Running";
$D('startButton').disabled = true;
setTimeout(start_delayed, 250);
iterations = $D('iterations').value;
}
function start_delayed () {
var ret;
ret = display.set_prefer_js(true);
if (ret) {
message("Running test: prefer Javascript ops");
var time1 = run_test();
message("prefer Javascript ops: " + time1 + "ms total, " +
(time1 / iterations) + "ms per frame");
} else {
message("Could not run: prefer Javascript ops");
}
display.set_prefer_js(false);
message("Running test: prefer Canvas ops");
var time2 = run_test();
message("prefer Canvas ops: " + time2 + "ms total, " +
(time2 / iterations) + "ms per frame");
if (Util.get_logging() !== 'debug') {
display.resize(start_width, start_height, true);
test_functions();
}
$D('startButton').disabled = false;
$D('startButton').value = "Do Performance Test";
}
function run_test () {
var width, height;
width = $D('width').value;
height = $D('height').value;
display.resize(width, height);
var color, start_time = (new Date()).getTime(), w, h;
for (var i=0; i < iterations; i++) {
color = [128, 128, (255 / iterations) * i, 0];
for (var x=0; x < width; x = x + 16) {
for (var y=0; y < height; y = y + 16) {
w = Math.min(16, width - x);
h = Math.min(16, height - y);
var tile = display.getTile(x, y, w, h, color);
display.setSubTile(tile, 0, 0, w, h, color);
display.putTile(tile);
}
}
}
var end_time = (new Date()).getTime();
return (end_time - start_time);
}
window.onload = function() {
message("in onload");
$D('iterations').value = 10;
display = new Display({'target' : $D('canvas')});
display.resize(start_width, start_height, true);
message("Canvas initialized");
test_functions();
}
</script>
</html>