Canvas Query 0.7 - What's new?

Drop image support drop some image from disk on this document

.onDropImage(function(image) { 

  /* desaturate image */
  this.drawImage(image, 0, 0).setHsl(null, 0, null);
});

Match palette go retro in one line of code

convert to gameboy colors

.matchPalette(["#0f380f", "#306230", "#8bac0f", "#9bbc0f"]);

Get palette list all colors from image

.getPalette()

Resize pixel pixel scale

x2

.resizePixel(2)

Trim auto-crop

trim

.trim("#eeeeff");

Crop

crop

.crop(x, y, width, height);

Grayscale to alpha

Applies alpha value to pixels according to their grayscale value (r + g + b) / 3. White is fully opaque. Black is transparent.

grayscale to alpha

.grayscaleToAlpha();

Touch events start experimenting on Android / IOS

Depending on platform mouse or touch event will be bound

cq().framework({
  onRender: function() {
    this.clear("rgba(10, 10, 10, 0.1)");
  },

  onMouseDown: function(x, y) {
    this.beginPath().fillStyle("#00ffff").circle(x, y, 32).fill();
  },

  onMouseUp: function(x, y) {
    this.beginPath().fillStyle("#ff0088").circle(x, y, 32).fill();
  },

  onMouseMove: function(x, y) {
    this.beginPath().fillStyle("#ffaa00").circle(x, y, 32).fill();
  }
});

About

Canvas Query is a wrapper library for HTML5 Canvas element which allows it to be used with jQuery like syntax. Also it adds a lot of common use image manipulation methods mainly convenient for gamedevelopers.

Cheers
Rezoner