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

Blend

Blends two layers together using canvas blend modes as in gimp/photoshop. It also takes care of compositing (masking) transparent areas

cq().blend (above, mode, amount);

above : Layer | Canvas | Image | Color

mode : normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

amount : 0.0 - 1.0

Blending using color

playground({

  container: exampleContainer,

  create: function() {

    this.loadImages("ship");

  },

  render: function() {

    this.layer.clear("#224");

    var colors = ["#08f", "#f08", "#af0", "#fa0"];

    for(var i = 0; i < colors.length; i++) {

      var ship = cq(this.images.ship).blend(colors[i], "hue", 1.0);

      this.layer.drawImage(ship.canvas, ship.width * i, 0);    

    }

  }

});

Blending using two images

loadImages("planet", "earth", function(images) {

  /* cycle through all blend modes and mix the images */

  var modes = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];

  for (var i in modes) {

    cq(images.planet)
      .blend(images.earth, modes[i])
      .appendTo(document.body);

  }
});


Have any questions? Don't hesitate to ask:

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