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

Create

To create a new canvas wrapped with canvasquery just call cq()

cq(); 

Custom size

cq(320, 240); 

From existing image, canvas, another wrapper or imageBitmap

cq(image); 
cq(canvas); 

Use clone() if you want to use a copy of wrapped canvas.

cq(canvas).clone();

You can also access original canvas, and rendering context of a layer

var layer = cq();

layer.canvas; /* document.createElement("canvas") */
layer.context; /* canvas.getContext("2d") */

Append

A new canvas will be sitting in memory. Use appendTo method to insert it into document.

var layer = cq().appendTo(document.body);

Chaining

All layer methods return this so they can be called in a chain.

var layer = cq()
  .font("32px Arial")
  .fillStyle("#ff0000")
  .fillText("Hello world!", 32, 32);

Original context attributes takes form of a setter-getter.

var layer = cq();

/* this is how you set a value */

layer.font("32px Arial");

/* this is how you get value */

var font = layer.font(); 

How is it different from Canvas?

CanvasQuery:

var layer = cq()  
  .fillStyle("#0000ff")
  .fillRect(0, 0, 320, 320)
  .appendTo(document.body);

Canvas:

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

var context = canvas.getContext("2d");

context.fillStyle = "#0000ff";
context.fillRect(0, 0, 320, 240);


Have any questions? Don't hesitate to ask:

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