# P5.js with plotly.js

**URL:** <https://discourse.processing.org/t/p5-js-with-plotly-js/32393>\
**Category:** Libraries\
**Created:** [September 23, 2021, 8:32am UTC](https://discourse.processing.org/t/p5-js-with-plotly-js/32393 "2021-09-23T08:32:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 23, 2021, 8:32am UTC](https://discourse.processing.org/t/p5-js-with-plotly-js/32393/1 "2021-09-23T08:32:43Z")

</div>

hi,  
how can i draw plotly.js based chart onto p5.js based canvas?  
for example,  
[https://editor.p5js.org/ronraisch/sketches/SJbUMtYyM](https://editor.p5js.org/ronraisch/sketches/SJbUMtYyM)

thank you

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [September 23, 2021, 9:25am UTC](https://discourse.processing.org/t/p5-js-with-plotly-js/32393/2 "2021-09-23T09:25:32Z")

</div>

Plotly appears to use a radically different rendering strategy which is a mix of SVG, DOM elements, and in certain scenarios a WebGL based canvas. There is no obvious way to get them to integrate cleanly. There are two ways that could theoretically work: 1) hide the Plotly div and use [the `toImage()` function](https://plotly.com/javascript/plotlyjs-function-reference/#plotlytoimage) to generate image data that you could then display on a p5.js function, or 2) overlay the p5.js canvas on top of the Plotly div (although depending if you want both Plotly and p5.js to be interactive this may be tricky.

If you could describe what you are actually trying to accomplish it would be easier to give you a recommendation.

---

<div class="post-metadata">

**Author:** ![processing\_user](https://avatars.discourse-cdn.com/v4/letter/p/7c8e57/32.png) [@processing\_user](https://discourse.processing.org/u/processing_user)\
**Post date:** [September 24, 2021, 7:57am UTC](https://discourse.processing.org/t/p5-js-with-plotly-js/32393/3 "2021-09-24T07:57:31Z")

</div>

hi,  
after I read your comment I tried to used the grahp.js library again to solve my problem and I did solve without using plotly.js(though it seems a great library).

thank you