merging multiple <canvas> issue

Question

Я разрабатываю простое приложение, для которого мне нужно использовать несколько globalCompositeOperation, поэтому мне нужно использовать несколько скрытых элементов, а затем объединить их, чтобы получить окончательный результат.

один из элементов холста используется для drawImage(), а затем использовать его как альфа-маску.

Я предположил, что на 2-м холсте, если я использую рисование 1-го холста, он скопирует его точно так, что я могу добавить 2-е место поверх него. Это только скопирует FillRect() и игнорирует DrawImage() функцию ...

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

Застрял на нем в течение нескольких часов и вам нужна ваша помощь. Пытались использовать 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

You пытаются использовать alphaObj до его полной загрузки.

Попробуйте что-то вроде этого:

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); 
};