다중 병합 <canvas> 문제

Question

globalcompositeoperation을 여러 개 사용해야하는 간단한 앱을 설계하고 있으므로 여러 숨겨진 항목을 사용해야 만 최종 결과를 얻을 수 있습니다.

캔버스 항목 중 하나는 drawImage()에 사용 된 다음 알파 마스크로 사용합니다.

제 1 캔버스를 그릴 때 제 2 캔버스를 사용한다고 가정하면 제 2 캔버스에 그 위에 제 2 캔을 더할 수 있도록 정확하게 복사 할 것입니다. 내가 2에 대한 첫 번째 캔버스의 전체 내용을 전달할 수있는 방법을

... 어떤 생각을 단지 fillRect 할()를 복사하고 의 drawImage() 기능을 무시합니까? 두 번째 캔버스로 이동하려면 가면 부분이 필요합니다.

몇 시간 동안 붙어서 도움이 필요합니다. toDataUrl ("이미지/PNG로")하고 출력을 사용하려고 그 2 캔버스,하지만 점점 같은 결과 :(

단순화 된 버전 아래로 : http://jsfiddle.net/EbVmm/17/

감사

var c1 = document.getElementById("canvas1"); 
var c2 = document.getElementById("canvas2"); 

function drawScene(mainColour) { 

    var ctx = c1.getContext("2d"); 

    var alphaPath = "http://eskarian.com/images/alpha-test.png"; 
    var alphaObj = new Image(); 
    alphaObj.src = alphaPath; 

    ctx.fillStyle = mainColour; 
    ctx.fillRect(0, 0, 200, 300); 
    ctx.globalCompositeOperation = 'xor'; 
    alphaObj.onload = function() { 
     ctx.drawImage(alphaObj, 0, 0); 
    }; 
}; 

function addScene(colour) { 
    var ctx2 = c2.getContext("2d"); 

    ctx2.drawImage(c1, 0, 0); 
    ctx2.globalCompositeOperation = "source-over"; 
    ctx2.fillStyle = colour; 
    ctx2.fillRect(50, 50, 100, 100); 

}; 

Answer 1

당신에게 alpha30이 완전히로드되기 전에 알파 바이트를 사용하려고합니다.

var c1 = document.getElementById("canvas1"); 
var c2 = document.getElementById("canvas2"); 

var alphaPath = "http://eskarian.com/images/alpha-test.png"; 
var alphaObj = new Image(); 
alphaObj.onload = function() { 
    drawScene(mainColour); 
    addScene(colour) 
}; 
alphaObj.src = alphaPath; 


function drawScene(mainColour) { 
    var ctx = c1.getContext("2d"); 
    ctx.drawImage(alphaObj, 0, 0); 
    ctx.fillStyle = mainColour; 
    ctx.fillRect(0, 0, 200, 300); 
    ctx.globalCompositeOperation = 'xor'; 
}; 

function addScene(colour) { 
    var ctx2 = c2.getContext("2d"); 
    ctx2.drawImage(c1, 0, 0); 
    ctx2.globalCompositeOperation = "source-over"; 
    ctx2.fillStyle = colour; 
    ctx2.fillRect(50, 50, 100, 100); 
};