I have a project where there are two canvases that need to be combined, one inside p5 and one outside. The first is a p5js sketch (created via createCanvas that is essentially a drawing application) and the second is auto-created via an API call to a map service (our use case is to basically annotate a map).
For reference, the API looks for a div with a particular ID and then appends the new canvas element.
What we'd like to do is stitch together the two images into a savable image for the user. The bottom layer would be coming from the map API canvas and the top layer would be the user-drawn annotations.
The issue we're facing is that the automatically-created canvas is coming in as a webgl context, so we don't seem to be able to use any of the basic methods for getting canvas data in a 2d context.
Is there an easy way to do this that I'm overlooking, or do I need to start figuring out how to parse out webgl data into a graphics object's pixels array?
The picture below is what we have so far - the drawing works, the map is loaded fine, now we just need to save them as a full image for the user.
from Loading data drawn to HTML canvas from API into p5js
No comments:
Post a Comment