Canvas Query

Build Status

  • extended canvas for gamedevelopers
  • easy setup for a game loop, rendering loop, mouse, touch and keyboard
cq(640, 480)
  ..drawImage(image, 0, 0)
  ..fillStyle('#ff0000')
  ..fillRect(64, 64, 32, 32)
  ..blur()
  ..appendTo(query('body'));

Overview

Reference Manual Examples

Getting started

Creating wrapper

From existing canvas

cq(canvas);

From image

cq(image);

From CSS Selector

cq('#canvas');
cq('.image');

Empty

cq(320, 240);

Fullscreen

cq();
  • CqWrapper supports all CanvasRenderingContext2D methods and properties by using noSuchMethod.

You can still access the original context and canvas element

cq('#something').canvas;
cq('#something').context;

Clone

Any change done to the wrapper will be applied to the original provided (or created) canvas element. Whenever you want to break the chain reaction and get a fresh copy use .clone() method:

var clone = cq().clone()..setHsl(...);

Appending

If you want to insert your canvas to the document body use the .appendTo() method:

cq(320, 240)..fillStyle = '#00ff00'
            ..fill(0, 0)
            ..appendTo(query('body'));

Help

If you have any question ask them here

Credits

Libraries

blend_functions
canvas_query
color_tools