Javascript 在画布上为png着色

我想通过添加一个名为tint的画布，在画布上为png着色，该画布将为主画布上的png指定颜色。但什么也没有画出来：

js

---

我想我每周会看到这个问题2-3次。当pic.onload事件异步加载图像时，您需要从pic.onload事件中绘制图像-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;

在任何情况下，您都会尝试在fiddle中加载一个来自不同来源的图像，因此无法正常工作（我在下面的fiddle中替换了图像url，以便您可以验证它现在是否绘制到画布上）

工作示例：

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;