Ccapture to save graphics vs canvas

p5.js Libraries
1

Hello all,

using the library ccapture - I realize this is an older Library so if anyone has another recommendation for capturing png sequences from P5.js that would be fantasic.

In the sketch here: I am using ccapture to capture the canvas. However, I am looking to see if it is possible to capture a createGraphics?

In a different sketch, I am using

graphic.saveCanvas("MyGraphics", 'png'); //for still images

I was expecting the ccapture library to do something similar with

  capturer.capture(graphic); //Throws a "failed to execute 'drawImage' on 'CanvasRenderingContext2D'
//versus
  capturer.capture(canvas);  //works but captures the whole canvas.

Any thoughts?

Thanks all.

2

Hi! The provided sketch doesn’t seem to represent your question. Are you working with png or gif?

If it’s png, I found it’s straightforward to capture canvas or graphics - both are in fact <canvas>. In this sketch, pressing a saves the canvas and s saves the graphics - and it does not require extra library:

If it’s gif, again under the hood canvas and graphics are the same, but it may depend on the implementation of the library. Could you provide a sketch that gives an error so that others can look into it?

1 Like
4

Yes, my sketch is a small example of ccapture working in P5.js.

I am using both gif and png but as stated in the original question - I am trying to capture only a specific graphics object instead of the whole canvas.

Also for extra clarification, “png sequences” would be multiple frames. So capturing a “video” from a certain point to an end point.

Edit: my sketch has been updated to reflect the question better. I would like to only capture the graphics object “newGraphic” with the ccapture library.

5

In fact ccapture is made for <canvas> element and not for p5.js, you need to pass an element. You can get a reference by graphics.elt so you can write

  capturer.capture(newGraphic.elt)

I haven’t checked the result but the code seems running.

(Initially I was lazy to search for ccapture, and you can blame me for the laziness, but if you would’ve added a link to ccapture it may have been a bit easier… I understand you cannot give the whole code but it is always a good practice to provide all the information when you ask on a forum)

2 Likes
6

Thank you! My apologies, I also did not have the proper amount of time to post / reformat my test sketch before i had to leave!

Thanks!