canvaskit-wasm

import InitCanvasKit from 'canvaskit-wasm'; async function setupCanvasKit() { // Ensure an HTML canvas element with id 'my-canvas' exists in your page. // Example HTML: <canvas id="my-canvas" width="200" height="200"></canvas> const CanvasKit = await InitCanvasKit({ // `locateFile` tells CanvasKit where to find its .wasm file. // Using unpkg.com for a quick CDN example. locateFile: (file: string) => `https://unpkg.com/canvaskit-wasm@0.41.1/bin/${file}` }); if (!CanvasKit) { console.error('Failed to initialize CanvasKit.'); return; } // Create a SkSurface attached to the HTML canvas element. const surface = CanvasKit.MakeSWCanvasSurface('my-canvas'); if (!surface) { console.error('Could not create SkSurface'); // Handle error or fallback return; } const canvas = surface.getCanvas(); const paint = new CanvasKit.SkPaint(); paint.setColor(CanvasKit.RED); paint.setStyle(CanvasKit.PaintStyle.Stroke); paint.setStrokeWidth(5); canvas.drawRect(CanvasKit.SkRect.MakeXYWH(10, 10, 100, 100), paint); // Flush the SkSurface to render content to the HTML canvas. surface.flush(); // Clean up Skia objects when no longer needed to prevent memory leaks. paint.delete(); surface.delete(); // Note: CanvasKit itself should only be initialized once. } // Execute the setup function. setupCanvasKit();