Color Changing PinkiePie !

An-Anonymous-Pen.markdown

Using canvas, you can change the color of an image !

index.html

<canvas id="hello" width="500" height="500"></canvas>  

script.js

var canvas = document.getElementById("hello");
var ctx = canvas.getContext("2d");
var img = new Image();
img.addEventListener("load", function() {
  var hue = 0;
  var level=50;
  function loop () {
    ctx.globalCompositeOperation = "source-over";
    //ctx.clearRect(0,0,500,500);
    ctx.drawImage(img, 0, 0, img.width, img.height, 0,0,500,500);
    ctx.fillStyle = "hsla("+hue+",100%,50%,0.5)";
    ctx.globalCompositeOperation = "source-atop";
    //ctx.globalCompositeOperation = "lighter"
    ctx.fillRect(0,0,500,500);
    hue+=0.5
    level+=1;
    level%=100
    window.requestAnimationFrame(loop);
  }
  loop();
});
img.src="http://th03.deviantart.net/fs71/200H/i/2012/264/0/d/twilight_sparkle_svg_by_tiwake-d5f1kmw.png"