symaxian / Cel

A small HTML5 canvas shim that analyzes your usage of the canvas API, highlighting suspect method calls and providing tips on how to optimize for performance.

Cel

A small HTML5 canvas shim that records and analyzes your usage of the API, providing some tips on how to better use the API.

Usage

First ensure that the Cel JavaScript and CSS files are included in the web page.

To have Cel record a 2d canvas context, the context must be wrapped and the wrapper must then be treated as the canvas context that it is wrapping.

var myCanvas = document.getElementById('myCanvas');
var myContext = Cel.wrap(myCanvas.getContext('2d'));
myContext.fillStyle = 'blue';
myContext.fillText(30, 30, 'Hi!');

Currently the history of a context can only be outputted directly as HTML. Call the exportHTML() method on the context wrapper to obtain a DIV element with a visual history of the usage of the canvas element.

document.body.appendChild(myContext.exportHTML());

Analysis

Cel will also analyze the history of a canvas context, how methods were invoked and what modifications were made to properties. In the exported HTML, certain events will be highlighted as being suspicious. Upon hovering over the highlighted event text the reason for why it was flagged as suspicious is revealed.

An example is below. Where the rect() and stroke() method calls may be replaced by a single strokeRect() method call.

set strokeStyle = "blue"

rect( 0, 0, 60, 40 )

stroke()