CODEWITHSUNDEEP
javascripthtmlcanvas
Finnnn
Finnnn

Reputation: 3580

Javascript - Canvas - overlaying a transparent png on a previousley filled color

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?

Upvotes: 4

Views: 7347

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63820

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/

Upvotes: 4

Related Questions