Question

If I draw a rectangle on a canvas, fill it with a solid colour. Is it possible to fill it again with an transparent png, so that I can still see the original colour in the background?

Something like, dummy code –

  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

I’ve tried a similar approach and it’s not working.

Is there another way of doing this? Am I missing something?

Answer 1

What you’ve got will work just fine. Make sure you have a truly transparent PNG.

Here’s a working example of your code:

http://jsfiddle.net/BDXc7/