JSFiddle - React, Tailwind, and code Playground

by pedro_g_s

HTML

<canvas id=foo width=30020 height=300></canvas>

<script type="text/javascript"
  src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>
<script type="text/javascript">
  const ckLoaded = CanvasKitInit({
    locateFile: (file) => 'https://unpkg.com/[email protected]/bin/'+file});
  ckLoaded.then((CanvasKit) => {
    const surface = CanvasKit.MakeCanvasSurface('foo');
    const surface2 = CanvasKit.MakeCanvasSurface('foo2');

    const paint = new CanvasKit.Paint();
    paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
    paint.setStyle(CanvasKit.PaintStyle.Stroke);
    paint.setAntiAlias(true);
    const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
        const rr2 = CanvasKit.RRectXY(CanvasKit.LTRBRect(5, 30, 100, 130), 25, 15);

    function draw(canvas) {
      console.log("=====> drawing green canvas")
      canvas.clear(CanvasKit.GREEN);
      canvas.drawRRect(rr, paint);
    }
    
    const surface3 = CanvasKit.MakeCanvasSurface('foo2');
    const surface4 = CanvasKit.MakeCanvasSurface('foo2');
    
    surface.drawOnce(draw);
    
		const canvas3 = surface3.getCanvas()
		const canvas4 = surface4.getCanvas()
    window.requestAnimationFrame(() => {
	    console.log("=====> drawing blue canvas")
      canvas3.clear(CanvasKit.BLUE)
      canvas3.drawRRect(rr, paint);
      canvas3.drawRRect(rr2, paint);
      surface3.flush();
    })
    console.log("=====> drawing red canvas")
	  canvas4.clear(CanvasKit.RED);
    surface4.flush();
  });
</script>