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

Canvas Query

CanvasQuery is a game oriented wrapper for Canvas element.

Download from Github

Easy

/* Create 320x240 canvas */

var layer = cq(320, 240);

Chainable

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

Helpful

/* 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.textBaseline("top").fillText("browser");
layer.font("24px fancy");

/* Get the real font height in pixels */

layer.fontHeight();

> 22

Raw

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

var layer = cq();

layer.context.fillStyle = "#fff";

Extendable

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

    this.fillStyle("#fff");
    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