用其他图像填充图像javascript / html5

Question

I need help with the following resource http://www.filmfans.cz/test/index2.html I don't know how to change the colours of the pinquen after the click on the sample. I would like to do something similar as in the following link http://www.pixelbox.sk/fileadmin/Flash/cosmo_2.swf

Here is my code

    $(window).load(function(){ 
    var width = $(window).width();
    var height = $(window).height();


var c = document.getElementById("a");
var ctx = c.getContext("2d");


var can2 = document.createElement('canvas');
document.body.appendChild(can2)

can2.width = c.width;
can2.height= c.height;
var ctx2 = can2.getContext("2d");

var test= new Image();
test.src = "tux.png";
test.onload = function() {
ctx2.drawImage(test, 0, 0);   
}

var img = new Image();
img.src = "2.png";
img.onload = function(){


ctx2.globalCompositeOperation = "source-in";
var pattern = ctx2.createPattern(img, "repeat");
ctx2.fillStyle=pattern;
ctx2.fillRect(0,0,300,300);
}


});


$(document).ready(function () {
$('.klik').click(function() {
var adresa = $(this).children('img').attr('src');
var canvas =  document.getElementById("a");
canvas.width = canvas.width;//blanks the canvas
 var c = canvas.getContext("2d");
 var img = new Image();
 img.src = adresa;
 img.onload = function(){


 var pattern = c.createPattern(img, "repeat");
//c.globalCompositeOperation = "source-in";
 c.fillStyle=pattern;
 c.fillRect(0,0,300,300);
 }

  //    c.drawImage(img, 0, 0);
  //}
 //return false;

});
});
</code>
</pre>

Problem solved !

Answer 1

Using a second, temporary canvas with source-in is the right idea:

 ctx2.drawImage(test, 0, 0);
 ctx2.globalCompositeOperation = 'source-in';
 var ptrn = ctx2.createPattern(pattern,'repeat');
 ctx2.fillStyle = ptrn;
 ctx2.fillRect(0,0,300,300);
 ctx.drawImage(can2,0,0)

live example:

http://jsfiddle.net/UcGrC/