A small canvas image on a larger background image, merging onto individual canvas pixel data

Question

How to combine a smaller image on top of a larger background image on one canvas. The smaller image will move. Therefore, I will need to maintain a link to the original background data, so that each frame can be redrawn, with the overlay in a new position.

BgImage: 1280 x 400, overlayImage: 320 x 400, overlayOffsetX: mouseX

Answer 1

I think it’s usually a whole scene to paint every time you want to change something, like this:

context.drawImage(bgImage, 0, 0);
context.drawImage(overlayImage, overlayOffsetX, 0);

---

UPDATE

.

- , , . canvas ( ), . putImageData , . , . , .

// preparation of canvas containing data of overlayImage
var OVERLAY_IMAGE_WIDTH = 320;
var OVERLAY_IMAGE_Height = 400;
var overlayImageCanvas = document.createElement('canvas');
overlayImageCanvas.width = OVERLAY_IMAGE_WIDTH;
overlayImageCanvas.height = OVERLAY_IMAGE_HEIGHT;
overlayImageCanvas.getContext('2d').putImageData(overlayImage, 0, 0);

// drawing scene, execute this block every time overlayOffsetX has changed
context.putImageData(bgImage, 0, 0);
context.drawImage(overlayImageCanvas, overlayOffsetX, 0);