# How capture canvas image in three js

**URL:** <https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228>\
**Category:** Questions\
**Tags:** canvas\
**Created:** [June 26, 2018, 7:05am UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228 "2018-06-26T07:05:54Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sandeep](https://avatars.discourse-cdn.com/v4/letter/s/ecccb3/32.png) [@sandeep](https://discourse.threejs.org/u/sandeep)\
**Post date:** [June 26, 2018, 7:05am UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/1 "2018-06-26T07:05:54Z")

</div>

I need to capture canvas 3d image in three js.  
please help me.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 26, 2018, 7:32am UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/2 "2018-06-26T07:32:06Z")

</div>

Hi!  
Do you mean that you want to take a screenshot of your scene?

Google gave me many results. One of them:  
https://codepen.io/shivasaxena/embed/preview/QEzAAv?height=300&slug-hash=QEzAAv&default-tabs=js,result&host=https://codepen.io&embed-version=2

---

<div class="post-metadata">

**Author:** ![Yash\_Joshi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yash_joshi/32/6992_2.png) [@Yash\_Joshi](https://discourse.threejs.org/u/Yash_Joshi)\
**Post date:** [December 12, 2019, 1:06pm UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/3 "2019-12-12T13:06:50Z")

</div>

This is not working i need same functionality and i am using the toDataUrl method to and getting the string too but it gives me black screen

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 12, 2019, 1:24pm UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/4 "2019-12-12T13:24:05Z")

</div>

It works as expected, at least for me.

---

<div class="post-metadata">

**Author:** ![Yash\_Joshi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yash_joshi/32/6992_2.png) [@Yash\_Joshi](https://discourse.threejs.org/u/Yash_Joshi)\
**Post date:** [December 12, 2019, 1:26pm UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/5 "2019-12-12T13:26:37Z")

</div>

i am using this [https://www.npmjs.com/package/react-container-3d](https://www.npmjs.com/package/react-container-3d) does it affect

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 12, 2019, 1:28pm UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/6 "2019-12-12T13:28:44Z")

</div>

I don’t use it, so I have nothing to say about that.

---

<div class="post-metadata">

**Author:** ![Yash\_Joshi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yash_joshi/32/6992_2.png) [@Yash\_Joshi](https://discourse.threejs.org/u/Yash_Joshi)\
**Post date:** [December 12, 2019, 1:39pm UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/7 "2019-12-12T13:39:43Z")

</div>

@prisoner849 can you help me in this pen it is not working please can you check  
[https://codesandbox.io/s/agitated-paper-3wke4](https://codesandbox.io/s/agitated-paper-3wke4). Please let me know if you have some solution on this please

---

<div class="post-metadata">

**Author:** ![llttle\_new\_pencil](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/llttle_new_pencil/32/3577_2.png) [@llttle\_new\_pencil](https://discourse.threejs.org/u/llttle_new_pencil)\
**Post date:** [December 13, 2019, 4:37am UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/8 "2019-12-13T04:37:56Z")

</div>

You need to set renderer 's property which named preserveDrawingBuffer to ‘true’,and then use todataURL

---

<div class="post-metadata">

**Author:** ![Yash\_Joshi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yash_joshi/32/6992_2.png) [@Yash\_Joshi](https://discourse.threejs.org/u/Yash_Joshi)\
**Post date:** [December 13, 2019, 8:42am UTC](https://discourse.threejs.org/t/how-capture-canvas-image-in-three-js/3228/9 "2019-12-13T08:42:31Z")

</div>

@llttle_new_pencil thanks for your attention but i already set it can you check my pen