Grab what's under my canvas as part of an image
What I am trying to do is include what is under my canvas object on the page as part of the image when I saved what is inside the canvas.
I have an application that creates a canvas and allows painting with the mouse. This draw-in-place feature so you can draw on the page as if they were notes, so after I can save the image or page using "notes", I draw on it.
For now I can save what has sunk into the canvas, but since the background is not part of the canvas, I cannot save it. I tried experimenting with html2canvas.js, but it doesn't work in my case, because the DOM object redraws them to the canvas, but doesn't take up what's under the canvas to be part of the final image.
I would like to know if there is a way to do this, or somehow capture the pixels in this area and redraw them as part of the canvas when I create it.
Many thanks!
source to share
Unfortunately, HTML2Canvas (or something like that) is the only option, but this is only part of the puzzle. To get the desired effect, you need to create another canvas to compose the output from the HTML2Canvas and the drawing canvas. You will need to offset the HTML2Canvas output to the position of your drawing canvas and then draw imagedata from your drawing canvas on top of it. Then you can use imagedata from the layout canvas as output.
source to share
Possibly a duplicate, but I'll give you a very short answer; you can't (unless you do something like html2canvas where it wraps the DOM to the canvas element)
This is by design. If you could do that, it would be a security flaw. Scripts are not allowed to create images from arbitrary materials on a human screen. If you are looking for "html canvas safety rules" you will find more information on why this is prohibited.
source to share