I load a picture and draw it on canvas. With the mouse I can draw on the picture. Now I want to copy a defined part of an another picture to the same part of the shown picture. I thought I can copy the pixels from img2 to img1. Another idea is to place the pictures on top of the other (img1 oder img2) and cut an area from img1.
I don't know what is a possible way.
My try:
function loadPic() {
var ctx2 = document.getElementById('can').getContext('2d');
img = new Image();
img2 = new Image();
img.onload = function() {
ctx2.drawImage(img,0,0);
}
img.src = 'Haut vorne m.bmp';
img2.src = 'Muskeln vorne m.bmp';
}
And the copy:
var g = img2.getImageData(262, 157, 200, 200);
ctx.putImageData(g, 55, 170);
I get an error: img2.getImageData is not a function
Can anybody help ?
Thank you !
Please login or Register to submit your answer