If you are new to CanvasQuery it is a library which provides extensions that are missing in HTML5 canvas such us coloring, blend modes, chainability, additional shapes, text wrapping and much more. It is not an engine - it's just a bunch of must-have functions for any html5 gamedeveloper.
This is not a screenshot. Create fluid interfaces using borderImage function. This one is from artperski.com
cq().borderImage(image, x, y, width, height, top, right, bottom, left)
cq().roundRect(x, y, width, height, radius).fill()
cq().paperBag(x, y, width, height, modX, modY).fill()
cq().wrappedText(text, x, y, maxWidth)
Above text boundaries are:
var bounds = cq().textBoundaries(text, x, y, maxWidth)
cq().gradientText(text, x, y, maxWidth, gradient)
example:
cq().gradientText(text, x, y, maxWidth, [0.0, "#ffffff", 0.5, "#ff8800", 0.6, "#ffff88", 1.0, "#ff0000"]);
cq().framework(events, context);
Typical use case
var app = {
bootstrap: function() {
this.view = cq().framework(this, this);
/* in one line you did three things:
1) created fullscreen canvas and assigned it as your application view
2) created main application loop
3) assigned basic user-input events
*/
},
onstep: function(delta) {
this.currentScene.step(delta);
},
onmousedown: function() {
...
}
}
app.bootstap();