typescript_dist_canvas-scene.js
import SVGScene from "./svg-scene";
/**
* A scene that renders to a HTMLCanvasElement.
*/
export default class CanvasScene extends SVGScene {
/**
* Creates a new CanvasScene.
* @param {number} width - The width of the canvas.
* @param {number} height - The height of the canvas.
*/
constructor(width, height) {
super(width, height);
this.canvas = document.createElement("canvas");
this.canvas.width = width;
this.canvas.height = height;
const offscreen = this.canvas.transferControlToOffscreen();
this.worker = new Worker(new URL("./offscreen-canvas-worker.js", import.meta.url));
this.worker.postMessage(offscreen, [offscreen]);
}
/**
* Renders the scene to the canvas. Preferably don't await to keep the animation smooth.
* @returns {Promise<void>} - A promise that resolves when the scene has been rendered.
* @async
*/
async render() {
await super.render();
const svgAsBase64 = btoa(new XMLSerializer().serializeToString(this.svg));
const dataUrl = `data:image/svg+xml;base64,${svgAsBase64}`;
const img = new Image();
img.src = dataUrl;
await img.decode();
const bmp = await createImageBitmap(img);
this.worker.postMessage(bmp, [bmp]);
}
}
//# sourceMappingURL=canvas-scene.js.map