Javascript - Toile - superposition d'un png transparent sur une couleur précédemment remplie

Question

Si je dessine un rectangle sur une toile, remplissez-la d'une couleur unie. Est-il possible de le remplir de nouveau avec un png transparent, de sorte que je peux toujours voir la couleur d'origine en arrière-plan?

Quelque chose comme, code fictif -

ctx.beginPath(); 
    ctx.lineTo(//draw a rectangle) 
    ctx.fillStyle = "#FF0000" 
    ctx.fill(); 
    var imageObj = new Image(); 
    function drawPattern() { 
     var pattern = ctx.createPattern(imageObj, "repeat"); 
     ctx.fillStyle = pattern; 
     ctx.fill(); 
    } 
    imageObj.onload = drawPattern; 
    imageObj.src = "images/dot.png"; //transparent png 

J'ai essayé une approche similaire et il ne fonctionne pas.

Existe-t-il une autre façon de procéder? Est-ce que je manque quelque chose?

Answer 1

Ce que vous avez fonctionnera très bien. Assurez-vous d'avoir un fichier PNG vraiment transparent.

Voici un exemple de travail de votre code:

http://jsfiddle.net/BDXc7/