Javascript - Canvas - previousleyの塗りつぶし色に透明な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/