Need somewhere to draw a 3D scene or alter a live camera feed? A canvas element provides a drawing surface in the page. JavaScript can render graphics into it, while a Web Component can keep the canvas—and much of the rendering work—out of the surrounding page markup. section 15.2 section 15.3
The surface plays two different roles in these examples:
- For a 3D scene, a component template contains `<canvas touch-action="none"></canvas>`, selects it with `querySelector('canvas')`, and sizes it to fill the component. That selected element is passed to `BABYLON.Engine`; the engine then runs a render loop. section 15.2
- For live video, `useCanvasForDisplay` switches a video component to its internal canvas. `canvasRefreshInterval="50"` requests a refresh every 50 milliseconds: a much longer interval looks choppy, while an overly short one can strain the browser. section 15.3
Change the video pixels
Start with a camera feed displayed through the canvas. A black-and-white filter can be assigned as the component’s `canvasFilter`. For a custom “snow” effect, request `frameDataMode="imagedata"` and loop through the frame data four values at a time: red, green, blue, and alpha. Randomizing some color values adds speckles; a range input controls how many pixels change. section 15.3
Listing 15.11. HTML/CSS for the 3D scene component
export default {
render() {
return `${this.css()}
${this.html()}`;
},
mapDOM(scope) {
return {
scene: scope.querySelector('canvas') #1
}
},
html() {
return `<canvas touch-action="none"> #2
</canvas>`;
},
css() {
return `<style> #3
:host {
display: inline-block;
width: 100%;
height: 100%;
}
canvas {
width: 100%;
height: 100%;
}
</style>`;
}
}
See how a scene component places, selects, and sizes its canvas before any 3D engine setup. section 15.2
You need not write every shader or graphics operation yourself. Babylon.js handles the 3D scene example, and video components expose filters and frame data. The canvas remains the drawing surface; the library or component determines how you work with it. section 15.2 section 15.3
