Using Canvas

drawing canvas

The canvas element in HTML provides a bitmap drawing surface that you can manipulate with JavaScript. Canvas is a pixel-based drawing context — you use JavaScript to draw shapes, text, images, and manipulate pixels directly on a grid. It has High-performance per-frame rendering.. You control every pixel every frame.

In three.js, when you create a WebGLRenderer, Three.js generates its own canvas automatically.

const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
// renderer.domElement is a canvas>

You can also create your own canvas - You can pass an existing canvas to the renderer.. this is useful when you want full control over styling, positioning, or sharing the canvas with 2D drawing:

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

make the canvas transparent

To make the canvas transparent you have to pass alpha: true when you create the webGLRenderer.

const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
});