Draw only overlapping pixels on a canvas from two other canvasses

I have 2 identical canvasses on which I draw with my mouse and a 3rd one (still same width and height), on which I want to have the ‘combination’ of the other 2 by only showing overlapping pixels, meaning the ones with the same coordinates from the initial 2 canvasses.

Something like:

const left = document.querySelector('#canvasLeft');
const right = document.querySelector('#canvasRight');
const combined = document.querySelector('#canvasCombined');
const draw = () => {
   // do drawing on each canvas...
   // get image data from the canvasses...
   const imageDataRight = right.ctx.getImageData(0, 0, right.canvas.width, right.canvas.height);
   const imageDataLeft = left.ctx.getImageData(0, 0, left.canvas.width, left.canvas.height);
   // do something with the image data picking only the matching pixels from each canvas --> PLEASE HELP!       
   combined.ctx.putImageData(imageDataCombined, 0, 0);

UPDATE: See the image below as a better explanation of what I’m trying to achieve

enter image description here

182 thoughts on “Draw only overlapping pixels on a canvas from two other canvasses”

Leave a Comment