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


Layer is a default renderer for Playground built on top of CanvasQuery library. Which is wrapper for <Canvas> element that provides a lot of functions regarding game development.

Layer in a nutshell


  .strokeRect(0, 0, 32, 32);

I want to learn more feature

Everything that is available in canvas is supported by layer. Just check compatibility guide below:

/* setter */
context.fillStyle = "#f00";     // Canvas 
layer.fillStyle("#f00");        // CanvasQuery

/* getter */
var style = context.fillStyle;  // Canvas
var style = layer.fillStyle();  // CanvasQuery

If you are familiar with canvas - chceck features of CanvasQuery

I don't like it. I want to do it pure canvas way.

Here you go:

var context = this.layer.context;

context.fillStyle = "#f00";
context.drawImage(this.images.happy, 0, 0);

Ask question:

Fork me on GitHub