You can define a new image using the canvas.drawImage
API. The source of the image will be a frame from the video element that is displaying your webcam footage. I don’t have time to create a custom example (yet), but this article does a good job providing a solution: https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos