# Ccapture with up to date p5js

**URL:** <https://discourse.processing.org/t/ccapture-with-up-to-date-p5js/23467>\
**Category:** Libraries\
**Created:** [August 24, 2020, 12:22pm UTC](https://discourse.processing.org/t/ccapture-with-up-to-date-p5js/23467 "2020-08-24T12:22:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 24, 2020, 12:22pm UTC](https://discourse.processing.org/t/ccapture-with-up-to-date-p5js/23467/1 "2020-08-24T12:22:40Z")

</div>

Hi guys,

I was trying to work out how to save animations with ccapture, a js library. I couldn’t get it to work, so I looked up an example that uses p5 and ccapture and found one [here](https://github.com/pbeshai/p5js-ccapture/blob/master/index.html).

After getting confused for a long time, I discovered that the sketch & capture will only work if I run an older version of p5, which the example does. They use 0.7.2, I think I’m using 1.1.9 (I think, how do I actually check the version that I have locally? haha)

What could have changed between those versions that is disrupting the functionality of ccapture, and how could I make ccapture work in my sketch?  
Thanks for your help!

EDIT:  
Also, according to the example, the way to refer to the p5 canvas is like so: `document.getElementById('defaultCanvas0')`. I’m wondering how I could have worked that out on my own, I don’t believe it is mentioned anywhere in the reference?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 24, 2020, 9:28pm UTC](https://discourse.processing.org/t/ccapture-with-up-to-date-p5js/23467/2 "2020-08-24T21:28:37Z")

</div>

> [@Hapiel](#):
>
> … the sketch & capture will only work if I run an older version of p5, which the example does.

> <https://github.com/spite/ccapture.js/issues/108#issuecomment-602163779>
>
> I tested with the latest versions, they all dont work, the last one that ccaptur…e works with is p5.js version 0.9.0. I didnt debug it in detail , but the problem is that the p5js canvas doesn't render as soon as you call capturer.start();

> [@Hapiel](#):
>
> What could have changed between those versions that is disrupting the functionality of ccapture,

> <https://github.com/processing/p5.js/issues/4481#issuecomment-616780988>
>
> \<!--
> Hi there!
> 
> To check any option, replace the "\[\]" with a "\[x\]". Be sure …to check out how it looks in the Preview tab! Feel free to remove any portion of the template that is not relevant for your issue.
> \--\>
> 
> \#### Most appropriate sub-area of p5.js?
> 
> \- \[\] Color
> \- \[\] Core/Environment/Rendering
> \- \[\] Data
> \- \[\] Dom
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[\] WebGL
> \- \[x\] Other (specify if possible)
> 
> 
> \#### Details about the bug:
> 
> \- p5.js version: v.1.0.0
> 
> ccapture wont render with v.1.0.0. older v.0.9.0 works.

> [@Hapiel](#):
>
> , how do I actually check the version that I have locally?

> <https://gist.github.com/GoToLoop/6125a5806872f7d4d93d11870b607851>
>
> There are more than three files. show original

> [@Detect p5 1.1.9 vs 1.0.0?](https://discourse.processing.org/t/detect-p5-1-1-9-vs-1-0-0/22920/2):
>
> I’m also puzzled why devs from both Processing Java & p5js flavors so adamantly refuse to add some way for a sketch to inspect which version it is running on. crazy_face Indeed the p5 constructor doesn’t contain any info about its version. The only place I’ve found it was inside the “p5.js” file itself on its 1st line as a comment block. Take a look at these 2 examples below. 1st is from the current “v1.1.9” and 2nd is from a very old “v.0.2.3”: /\*! p5.js v1.1.9 July 22, 2020 \*/: [cdn.…](http://cdn.JsDelivr.net/npm/p5@1.1.9)

---

<div class="post-metadata">

**Author:** ![Hapiel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hapiel/32/10226_2.png) [@Hapiel](https://discourse.processing.org/u/Hapiel)\
**Post date:** [August 24, 2020, 10:28pm UTC](https://discourse.processing.org/t/ccapture-with-up-to-date-p5js/23467/3 "2020-08-24T22:28:16Z")

</div>

Thank you so much, that solves it!

I also noticed that you use `.capture(canvas)` instead of `.capture('document.getElementById('defaultCanvas0'))`, which is of course much nicer, so thanks for that! Although I still wonder how I should find those kind of things myself…

I use a minified p5 which is auto installed by a VSC extension, so no comment blocks in there ☹