canvaskit-wasm for Edge Scripting for bunny.net 🐰

NPM Version

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()}