Javascript - Canvas - наложение прозрачного png на ранее заполненный цвет

Question

Если я рисую прямоугольник на холсте, залейте его сплошным цветом.Можно ли снова заполнить его прозрачным png, чтобы я все еще мог видеть исходный цвет на заднем плане?

Что-то вроде фиктивного кода -

  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

Я пробовал подобный подход, и он не работает.

Есть ли другой способ сделать это?Я что-то упустил?

Answer 1

То, что у тебя есть, будет отлично работать. Убедитесь, что у вас действительно прозрачный PNG.

Вот рабочий пример вашего кода:

http://jsfiddle.net/BDXc7/