Using Canvas

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.

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

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

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:

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.