Garmaine Staff asked 1 year ago

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 !