---
date: 2026-6-8
---

<!-- markdownlint-disable MD001 -->

# Using Canvas

![drawing canvas](https://desarrolloweb.com/storage/manual_images/1F6oup0I2qsMjfm0BsPpeB7JUEOyC18r1WTKKdK4.jpg)

When you create a `WebGLRenderer`, Three.js automatically generates a `canvas>` element for you. You don't usually need to think about it — it just works.

```javascript
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
// renderer.domElement is a canvas> — Three.js made it for you
```

But sometimes you want more control — maybe you want to style the canvas yourself, share it with 2D drawing, or place it in a specific spot on the page. In that case, you can **create your own canvas** and pass it to the renderer.

### using your own canvas

```html
<canvas id="myCanvas"></canvas>
```

```javascript
const canvas = document.getElementById('myCanvas');
const renderer = new THREE.WebGLRenderer({ canvas });
```

Now Three.js will render into your canvas instead of making its own. You can style it with CSS however you want — position it, resize it, give it borders — and Three.js won't interfere.

### making the canvas transparent

By default, the canvas has a solid background (usually black). If you want your 3D scene to sit on top of other page content, you need to make the canvas transparent:

```javascript
const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true, // transparent background
});
```

Then in your CSS you can put page content behind the canvas, or let a background image show through.

### when to use a custom canvas

| Situation                              | Default canvas | Custom canvas |
| -------------------------------------- | -------------- | ------------- |
| Quick test or prototype                | ✅ Yes         |               |
| Need precise CSS control               |                | ✅ Yes        |
| Mixing 2D canvas drawing with 3D       |                | ✅ Yes        |
| Embedding in a specific page container |                | ✅ Yes        |
| You don't care — just want it to work  | ✅ Yes         |               |

Most of the time the default canvas is fine. But now you know how to take control when you need it.
