I am trying to use canvas to remove background of pictures and I am filling it with a color as such :
const onResults = (results) => {
contextRef.current.save();
contextRef.current.clearRect(
0,
0,
canvasRef.current.width,
canvasRef.current.height
);
contextRef.current.drawImage(
results.segmentationMask,
0,
0,
canvasRef.current.width,
canvasRef.current.height
);
// Only overwrite existing pixels.
contextRef.current.globalCompositeOperation = "source-out";
contextRef.current.fillStyle = "#00FF00";
contextRef.current.fillRect(
0,
0,
canvasRef.current.width,
canvasRef.current.height
);
// Only overwrite missing pixels.
contextRef.current.globalCompositeOperation = "destination-atop";
contextRef.current.drawImage(
results.image,
0,
0,
canvasRef.current.width,
canvasRef.current.height
);
contextRef.current.restore();
};
As it can be seen, the background is in green and the person is in front. How can I change the green color with an other picture, for example a jungle using my current code structure?