раскрасить png на холсте

Question

Я хочу раскрасить png на холсте, добавив холст под названием tint, который назначит цвет png на основном холсте. Но ничего не рисоваться:

js fiddel code

JS

var tint = document.createElement('canvas'); 
    tint.width = 20; 
    tint.height = 20; 
    var tintCtx = tintCanvas.getContext('2d'); 

var canvas = document.getElementById('canvasA');  
var ctx = canvas.getContext('2d'); 



var pic = new Image(); 
pic.src = 'http://i3.minus.com/jUyvRw7sMVxJL.png'; 

var x =0; 
var y=0; 

tintCtx.fillStyle = #ff3633; 
tintCtx.fillRect(x,y,20,20); 
tintCtx.globalCompositeOperation = "destination-atop"; 
tintCtx.drawImage(pic, x, y); 

ctx.drawImage(pic, x, y); 
ctx.globalAlpha = 0.5; 
ctx.drawImage(tint, x, y); 

Answer 1

Я думаю, я вижу эту проблему 2-3 раза в неделю. Вам нужно нарисовать изображение из события pic.onload, когда оно загружает изображение async - ваш код ниже pic.src выполняется до загрузки изображения.

Я просто перестановка код, чтобы показать, где вам нужно сделать:

var tint = document.createElement('canvas'); 
tint.width = 20; 
tint.height = 20; 
var tintCtx = tintCanvas.getContext('2d'); 

var canvas = document.getElementById('canvasA');  
var ctx = canvas.getContext('2d'); 

var pic = new Image(); 
pic.onload = function() { 
    tintCtx.fillStyle = #ff3633; 
    tintCtx.fillRect(x,y,20,20); 
    tintCtx.globalCompositeOperation = "destination-atop"; 
    tintCtx.drawImage(pic, x, y); 

    ctx.drawImage(pic, x, y); 
    ctx.globalAlpha = 0.5; 
    ctx.drawImage(tint, x, y); 

} 
pic.src = 'http://i3.minus.com/jUyvRw7sMVxJL.png'; 

var x =0; 
var y=0; 

В любом случае вы пытаетесь загрузить изображение в скрипке, которая не из того же происхождения, так что воны «Я работаю (я заменил URL-адрес изображения в следующем скрипте, чтобы вы могли проверить, что он теперь рисует на холсте).

Рабочий пример:
http://jsfiddle.net/AbdiasSoftware/Br3SB/5/