This page is work-in-progress. You can reach me on twitter or mail to

Canvas Query

CanvasQuery is a game oriented wrapper for Canvas element.

Download from Github


/* Create 320x240 canvas */

var layer = cq(320, 240);


layer.textAlign("center").fillStyle("#fff").fillText("Hello World!", 32, 16);


/* There is no strokeCircle in original canvas */

layer.strokeCircle(x, y, radius);

/* Or centering images with align */

layer.align(0.5, 0.5);
layer.drawImage(image, 160, 100);

Pixleart friendly

/* Disable antialiasing for images and fonts */

cq.smoothing = false;

Pixel perfect

layer.font("24px fancy");

/* Get the real font height in pixels */


> 22


/* I don't like this wrapping thing... */

var layer = cq();

layer.context.fillStyle = "#fff";


CanvasQuery.Layer.prototype.whiteRectangle = function(x, y, w, h) {

    this.fillRect(x, y, w, h);


/* ... */

layer.whiteRctangle(0, 0, 64, 64);

Battle tested

Over its 4 years of existence and as a part of playground.js it has been used in commercial games for html5 browsers, appstore, playstore and even Steam.

Download on Github

Have any questions? Don't hesitate to ask:

Post issues on github, support my work on gratipay author rezoner