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!