Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Canvas Performance Demo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Performance Demo</title>
</head>
<body>
<div>
<h1>Canvas Performance Test</h1>
<label for="num_boxes">Boxes:</label>
<input type="text" id="num_boxes" value="1000"><br>
<label for="test_time">Test Time (in milliseconds):</label>
<input type="text" id="test_time" value="10000"><br>
<button id="run_test">Run test</button>
</div>
<script type="text/javascript">
var demo = {};
demo.rand = function demo_rand (min, max) {
return (Math.round(Math.random() * (max - min)) + min);
};
demo.makeBox = function demo_makeBox (width, height, color, speed) {
var dir_x = (demo.rand(1, 2) === 1) ? -1: 1;
var dir_y = (demo.rand(1, 2) === 1) ? -1: 1;
return {
x: 0,
y: 0,
width: width,
height: height,
color: color,
speed: speed,
direction: {
x: dir_x,
y: dir_y
}
};
};
demo.drawBox = function demo_drawBox (ctx, box) {
ctx.save();
ctx.fillStyle = box.color;
ctx.fillRect(parseInt(box.x), parseInt(box.y), box.width, box.height);
ctx.restore();
};
var view = {
width: 640,
height: 480
};
var canvas = document.createElement("canvas");
canvas.width = view.width;
canvas.height = view.height;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, view.width, view.height);
ctx.restore();
demo.run = function (box_count, time) {
ctx.save();
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, view.width, view.height);
ctx.restore();
// Create some boxes
var boxes = [];
var num_boxes = box_count;
for (var x = 0; x < num_boxes; x++) {
var color = "rgb("
+ demo.rand(0, 255) + ", "
+ demo.rand(0, 255) + ", "
+ demo.rand(0, 255) + ")";
var box = demo.makeBox(10, 10, color, demo.rand(50, 100));
box.x = demo.rand(0, view.width - box.width);
box.y = demo.rand(0, view.height - box.height);
boxes.push(box);
}
var last_update = 0;
var elapsed_log = [];
var update = function update () {
var now = new Date().getTime();
elapsed = now - last_update;
elapsed_log.push(elapsed);
last_update = now;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, view.width, view.height);
// Move boxes and check collision
for (var x = 0; x < boxes.length; x++) {
var b = boxes[x];
var pixels = ((b.speed / 1000) * elapsed);
b.x += (pixels * b.direction.x);
b.y += (pixels * b.direction.y);
if (b.x > (view.width - b.width)) {
b.x = (view.width - b.width);
b.direction.x = -1;
}
if (b.x < 0) {
b.x = 0;
b.direction.x = 1;
}
if (b.y > (view.height - b.height)) {
b.y = (view.height - b.height);
b.direction.y = -1;
}
if (b.y < 0) {
b.y = 0;
b.direction.y = 1;
}
demo.drawBox(ctx, b);
}
};
last_update = new Date().getTime();
var interval_id = window.setInterval(update, 0);
window.setTimeout(function () {
window.clearInterval(interval_id);
var sum = 0;
for (var x in elapsed_log) {
sum += elapsed_log[x];
}
var avg = Math.round(sum / elapsed_log.length);
ctx.save();
ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0, 0, view.width, 30);
ctx.restore();
ctx.save();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.font = "20px Courier";
ctx.fillText("Test complete. Average FPS: " + Math.round(1000 / avg), 5, 20);
ctx.restore();
}, time);
}
var run_button = document.getElementById("run_test");
run_button.addEventListener("click", function () {
var num_boxes = document.getElementById("num_boxes").value;
var test_time = document.getElementById("test_time").value;
demo.run(num_boxes, test_time);
}, true);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.