CODEWITHSUNDEEP
javascripthtml5-canvas
wazzup
wazzup

Reputation: 41

Can't use canvas method putImageData

I have following code:

var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
ctx.drawImage(img,0,0);
};
img.src = 'mwq.gif';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);

and i get image on first canvas element, when i check in console there is imageData, with width, lenght and pixel array, but somehow i can't get that image on another canvas element. I dont think there are typos, i rewrote same code several times, and at the end i stripped it to most minimal version without pixel manipulation, but it's still not working.

Upvotes: 1

Views: 441

Answers (1)

Denys Séguret
Denys Séguret

Reputation: 382150

Your code isn't called in the onload callback, it's executed before the image is loaded so there is nothing to put.

You could change it to

var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img,0,0);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx2.putImageData(imageData, 0, 0);
};
img.src = 'mwq.gif';

Upvotes: 2

Related Questions