HTML canvas speed test

Draw five kinds of shapes to an HTML5 canvas to test their relative speeds.

by Flatfingers

HTML

<body bgcolor="#000000">
  <canvas id="content"></canvas>
</body>

JavaScript

// This program tests the relative drawing speeds of five diffent ways to
// draw blending shapes on an HTML5 canvas:
//   filled rects
//   filled arcs
//   gradients
//   images (using drawImage() rather than putImageData())
//   shadows

//
// "ENUM" DEFINITIONS BEGIN HERE
//
var TEST_SPEED  = 0, // speed test
    TEST_VISUAL = 1; // visual pleasantness test

var OPAC_RGBA  = 0, // define shapes with individual RGBA opacity
    OPAC_ALPHA = 1; // use globalAlpha to set opacity

//
// TEST SETTINGS BEGIN HERE
//

var testType = TEST_VISUAL;
var opacType = OPAC_ALPHA;

//
// VARIABLE DEFINITIONS BEGIN HERE
//

if (testType == TEST_SPEED)
  var drawCount = 1000; // number of times to redraw each shape type (speed test)
else
  var drawCount = 100; // number of times to redraw each shape type (visual test)
canvasWidth   = 750; // width of test canvas
canvasHeight  = 600;  // height of test canvas
var swidth    = 50;   // width of shape to draw
var sheight   = 50;   // height of shape to draw
var timeRect  = 0;    // accumulated time needed to draw filled rects
var timeArc   = 0     // accumulated time needed to draw filled arcs
var timeGrad  = 0;    // accumulated time needed to draw gradients in rects
var timeImg   = 0;    // accumulated time needed to draw images
var timeShad  = 0;    // accumulated time needed to draw shadows of arcs
var x         = new Array(); // array of X locations for drawing rects and arcs
var y         = new Array(); // array of Y locations for drawing rects and arcs
var opacity   = 0.4;  // opacity value for blending shapes (0.0 - 1.0)
var shadowOffsetX = 10000; // insure that "real" shape is drawn offscreen
var shadowOffsetY = 10000; // insure that "real" shape is drawn offscreen
var shadowBlurAmount = 20;  // amount of blurriness for shadows (0 - 100)
var PIx2 = Math.PI * 2.0;   // optimization to avoid doing this math every time we draw an arc

// Use the first group of five if you want a speed timing test
// Use the second group of...