canvaskit-wasm for Edge Scripting for bunny.net 🐰
Skia
Skia is a complete 2D graphic library for drawing text, geometries, and images.
Quickstart
import * as BunnySDK from 'https://esm.sh/@bunny.net/edgescript-sdk@0.11.2'import CanvasKitInit from 'https://cdn.jsdelivr.net/npm/bunny-skia@0.0.13/dist/index.js'let CanvasKitBunnySDK.net.http.serve(async (request: Request): Promise<Response> => { // keep script startup time under 500ms if (!CanvasKit) { CanvasKit = await CanvasKitInit() } // generate image let surface = CanvasKit.MakeSurface(300, 300)! const canvas = surface.getCanvas() const paint = new CanvasKit.Paint() let robotoData = await getTestAsset('Roboto-Regular.woff') const roboto = CanvasKit.Typeface.MakeFreeTypeFaceFromData(robotoData)! const textPaint = new CanvasKit.Paint() textPaint.setColor(CanvasKit.Color(40, 0, 0)) textPaint.setAntiAlias(true) const textFont = new CanvasKit.Font(roboto, 30) const skpath = starPath(CanvasKit) const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], 1) paint.setPathEffect(dpe) paint.setStyle(CanvasKit.PaintStyle.Stroke) paint.setStrokeWidth(5.0) paint.setAntiAlias(true) paint.setColor(CanvasKit.Color(66, 129, 164, 1.0)) canvas.clear(CanvasKit.Color(255, 255, 255, 1.0)) canvas.drawPath(skpath, paint) canvas.drawText('Try Clicking!', 10, 280, textPaint, textFont) surface.flush() const img = surface.makeImageSnapshot() const bytes = img.encodeToBytes(CanvasKit.ImageFormat.WEBP)! // free wasm memory img.delete() dpe.delete() skpath.delete() textFont.delete() textPaint.delete() roboto.delete() paint.delete() surface.dispose() // return image response return new Response(bytes, { headers: { 'Content-Type': 'image/webp', }, })})function starPath(CanvasKit: ICanvasKit, X = 128, Y = 128, R = 116) { let p = new CanvasKit.Path() p.moveTo(X + R, Y) for (let i = 1; i < 8; i++) { let a = 2.6927937 * i p.lineTo(X + R * Math.cos(a), Y + R * Math.sin(a)) } return p}async function getTestAsset(name: string): Promise<Uint8Array> { const response = await fetch( `https://cdn.jsdelivr.net/gh/google/skia@main/modules/canvaskit/tests/assets/${name}`, ) return await response.bytes()}