title: How can I fill pixels in canvas with a picture instead of color?
body: <p>I am trying to use canvas to remove background of pictures and I am filling it with a color as such :</p>
  <pre><code>const onResults = (results) =&gt; {
      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 = &quot;source-out&quot;;
      contextRef.current.fillStyle = &quot;#00FF00&quot;;
      contextRef.current.fillRect(
        0,
        0,
        canvasRef.current.width,
        canvasRef.current.height
      );
  
      // Only overwrite missing pixels.
      contextRef.current.globalCompositeOperation = &quot;destination-atop&quot;;
      contextRef.current.drawImage(
        results.image,
        0,
        0,
        canvasRef.current.width,
        canvasRef.current.height
      );
  
      contextRef.current.restore();
    };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/8zD7h.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8zD7h.jpg" alt="enter image description here" /></a></p>
  <p>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?</p>