# Ccapture to save graphics vs canvas

**URL:** <https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747>\
**Category:** Libraries\
**Created:** [August 16, 2021, 4:24pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747 "2021-08-16T16:24:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rkdnson](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Post date:** [August 16, 2021, 4:24pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747/1 "2021-08-16T16:24:17Z")

</div>

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](https://editor.p5js.org/TedCharlesBrown/sketches/eEFdocTLN): 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

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

```

I was expecting the ccapture library to do something similar with

```auto
  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.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 16, 2021, 7:05pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747/2 "2021-08-16T19:05:15Z")

</div>

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:

https://editor.p5js.org/micuat/sketches/ub3_35KtF

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?

---

<div class="post-metadata">

**Author:** ![rkdnson](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Post date:** [August 16, 2021, 7:10pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747/4 "2021-08-16T19:10:38Z")

</div>

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](https://editor.p5js.org/TedCharlesBrown/sketches/eEFdocTLN) has been updated to reflect the question better. I would like to only capture the graphics object “newGraphic” with the ccapture library.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [August 16, 2021, 7:32pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747/5 "2021-08-16T19:32:25Z")

</div>

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

```javascript
  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)

---

<div class="post-metadata">

**Author:** ![rkdnson](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rkdnson](https://discourse.processing.org/u/rkdnson)\
**Post date:** [August 16, 2021, 7:34pm UTC](https://discourse.processing.org/t/ccapture-to-save-graphics-vs-canvas/31747/6 "2021-08-16T19:34:33Z")

</div>

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!