Loading data drawn to HTML canvas from API into p5js

Question

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.

Answer 1

Combining content from different canvases with different contexts can indeed be a bit tricky, especially when one of the canvases is using a WebGL context. Since p5.js provides limited support for working with WebGL contexts directly in the same way you can with 2D contexts, you'll need to find an alternative approach.

html2canvas library is something, which allows you to capture the contents of an HTML element (including canvases) and convert them into an image. This way, you can capture both canvases (p5.js and the map API canvas), combine them into a single image, and provide it as a download link for the user.

1. Add the html2canvas library to your project.

   <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

   (Make sure both the p5.js canvas and the map API canvas are loaded and visible on the page.)

2. In the event handler function for the button, you can use the html2canvas library to capture both canvases and then combine them into a single image. Once that's done, you can offer the combined image as a download link or perform any other action you desire.

example of what the event handler function might look like:

// Event handler function for the button to save the combined image
function saveCombinedImage() {
  // Get references to the p5.js canvas and the map API canvas
  const p5Canvas = document.getElementById('your-p5-canvas-id');
  const mapApiCanvas = document.getElementById('your-map-api-canvas-id');

  // Use html2canvas to capture both canvases
  html2canvas(p5Canvas).then((p5CanvasCapture) => {
    html2canvas(mapApiCanvas).then((mapApiCanvasCapture) => {
      // Create a new canvas to combine the captured canvases
      const combinedCanvas = document.createElement('canvas');
      combinedCanvas.width = p5CanvasCapture.width;
      combinedCanvas.height = p5CanvasCapture.height;
      const ctx = combinedCanvas.getContext('2d');

      // Draw the map API canvas as the bottom layer
      ctx.drawImage(mapApiCanvasCapture, 0, 0);

      // Draw the p5.js canvas as the top layer
      ctx.drawImage(p5CanvasCapture, 0, 0);

      // Now the `combinedCanvas` contains the merged image of both canvases
      // You can offer this as a download link or use it as needed.

      // For example, create a link for the user to download the image
      const downloadLink = document.createElement('a');
      downloadLink.href = combinedCanvas.toDataURL();
      downloadLink.download = 'combined_image.png';
      downloadLink.click();
    });
  });
}

In this example, replace your-p5-canvas-id and your-map-api-canvas-id with the actual IDs of your p5.js canvas and the map API canvas, respectively.