Harmonic paths
This is the JavaScript used by the first playground preset. Edit and run it in the interactive playground, including its HTML and CSS.
import {RegisterWebComponent} from '@wieslawsoltes/skiasharpweb/browser';
const S=await RegisterWebComponent({assetBaseUrl:window.__assets.skia});
const view=document.querySelector('#canvas');
view.addEventListener('surfaceerror',e=>console.error(e.detail));
view.addEventListener('paintsurface',({detail:{Canvas,Info}})=>{
const dark=document.documentElement.dataset.theme==='dark';
Canvas.Clear(S.SKColor.Parse(dark?'#14171c':'#f6f7f9'));
const petals=Number(document.querySelector('#petals').value);
const layers=Number(document.querySelector('#layers').value);
const radius=Math.min(Info.Width,Info.Height)*0.40;
const paint=new S.SKPaint({IsAntialias:true,Style:S.SKPaintStyle.Stroke,StrokeWidth:1.3});
try{for(let layer=0;layer<layers;layer++){
const path=new S.SKPath();
try{for(let i=0;i<=500;i++){
const a=i/500*Math.PI*2, r=radius*(.60+.21*Math.cos(a*petals+layer*.09))*(1-layer/(layers*1.6));
const x=Info.Width/2+Math.cos(a+layer*.018)*r, y=Info.Height/2+Math.sin(a+layer*.018)*r;
if(i===0)path.MoveTo(x,y);else path.LineTo(x,y);
}path.Close();paint.Color=S.SKColor.Parse(['#f897ab','#e0aaef','#9cb6ef','#81d8c9'][layer%4]);Canvas.DrawPath(path,paint);
}finally{path.Dispose();}
}}finally{paint.Dispose();}
});
for(const id of ['petals','layers'])document.getElementById(id).oninput=()=>view.InvalidateSurface();
document.querySelector('#redraw').onclick=()=>view.InvalidateSurface();
await view.InvalidateSurface();
console.log('Native Skia initialized. Change the geometry above.');Show the HTML host
<div class="toolbar"><label>Petals <input id="petals" type="range" min="3" max="19" value="7"></label><label>Layers <input id="layers" type="range" min="4" max="32" value="18"></label><button id="redraw">Redraw</button><output>Native Skia · raster</output></div><skia-canvas id="canvas" backend="canvas" class="stage"></skia-canvas><p class="hint">Real SKPath geometry rendered by native Skia WASM. No implicit font downloads.</p>How it works
The playground provides window.__assets.skia. In your own application, replace it with the public URL where you copied the native assets, for example assetBaseUrl: "/skia/". Use your deployment’s full base path.
A familiar API. A native engine.
Initialize the qualified runtime once, then draw through surfaces, canvases and paints. Select the backend for the environment, not the API.
Import /browser and copy native assets with skiasharp-web-assets. Supply the correct assetBaseUrl, including your deployment base path.
Own the lifetime
Dispose owned paints, paths, images and surfaces. Treat WebGPU availability separately from successful raster rendering.
The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.
Read the lifecycle guide →Know the contract
Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/skiasharpweb@0.5.1.