# P5.js using P2D and WebGL primitives

**URL:** <https://discourse.processing.org/t/p5-js-using-p2d-and-webgl-primitives/21824>\
**Category:** Coding Questions\
**Created:** [June 13, 2020, 12:29am UTC](https://discourse.processing.org/t/p5-js-using-p2d-and-webgl-primitives/21824 "2020-06-13T00:29:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ylh](https://avatars.discourse-cdn.com/v4/letter/y/bc8723/32.png) [@ylh](https://discourse.processing.org/u/ylh)\
**Post date:** [June 13, 2020, 12:29am UTC](https://discourse.processing.org/t/p5-js-using-p2d-and-webgl-primitives/21824/1 "2020-06-13T00:29:00Z")

</div>

I have a sketch that uses straightforward draws and text boxes. I now want to add a 3D drawing. Evidently WebGL will break my current code.

I only have one 3D drawing which can be in a separate area. Can I have two different canvases, using P2D and WebGL. Alternately, how does one change the P2D code to be WebGL compatible?

---

<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:** [June 13, 2020, 1:14am UTC](https://discourse.processing.org/t/p5-js-using-p2d-and-webgl-primitives/21824/2 "2020-06-13T01:14:31Z")

</div>

> [@ylh](#):
>
> Can I have two different canvases, using P2D and WebGL?

> **[reference | p5.js](https://p5js.org/reference/#/p5/createGraphics)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.