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


shifts hue, saturation and lighting in a layer

.shiftHsl (h, s, l);

h, s, l are in range of [0.0 - 1.0] or false if you don't want to change value


loadImages("ship", function(images) {

  var layer = cq(images.ship).appendTo(document.body);

  layer.drawImage(images.ship, 0, 0);

  setInterval(function loop()  {  
    layer.shiftHsl(0.01, false, false);
  }, 16);


Note that shifting hsl is a quite expensive (per pixel) operation and you don't want to do it in realtime - but rather cache the result and use it later.

Also if you process the same result over and over again it will mess up the palette after a few hundred runs.

Have any questions? Don't hesitate to ask:

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