Get started with canvaskit-wasm CDN

BSD-3-Clause licensed

Canvaskit-WASM: Fast 2D browser graphics with Skia via WebAssemblys Canvaskit implementation.

Tags:
  • drawing
  • canvas
  • graphics
  • wasm

Stable version

Copied!

How to start using canvaskit-wasm CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with canvaskit-wasm CDN - cdnhub.io</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="outputCanvas" width="200" height="200"></canvas>
    <script src="https://cdn.cdnhub.io/canvaskit-wasm/0.39.1/canvaskit.js"></script>
    <script>
        async function init() {
            const canvas = document.getElementById('outputCanvas');
            const ctx = CanvasRenderingContext2D.fromWasm(canvas);

            // Set up the rendering context
            ctx.fillStyle = 'red';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Create a Canvaskit context
            const sketch = new SketchContext(ctx);

            // Define a simple drawing function
            const drawCircle = (ctx, x, y, radius) => {
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, 2 * Math.PI);
                ctx.fill();
            };

            // Use Canvaskit to draw a circle
            sketch.drawCircle(100, 100, 50, drawCircle);

            // Render the canvas
            await sketch.present();
        }

        init();
    </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions