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?

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?

• javascript
• html
• canvas

Share Improve this question Follow edited Aug 10, 2011 at 9:24 Finnnn asked Aug 9, 2011 at 15:03 FinnnnFinnnn 3,60066 gold badges4949 silver badges6969 bronze badges 1

• It works for me on Chrome. Are you sure it is transparent? – pimvdb Commented Aug 9, 2011 at 15:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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/BDXc7/