JSFiddle - React, Tailwind, and code Playground

by pedro_g_s

HTML

<canvas id=foo width=300 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 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);
    
		const rr3 = CanvasKit.RRectXY(CanvasKit.LTRBRect(12, 30, 100, 130), 25, 15);
  
   
    const surface1 = CanvasKit.MakeCanvasSurface('foo');
    const surface2 = CanvasKit.MakeCanvasSurface('foo');
    //const surface2 = surface1
    
		const canvas1 = surface1.getCanvas()
    const canvas2 = surface2.getCanvas()
    canvas2.clear(CanvasKit.GREEN);
    canvas2.drawRRect(rr, paint);
    //canvas1.clear(CanvasKit.BLUE);
    }
//		surface2.flush()
		setTimeout(() => {

	    const surface3 = CanvasKit.MakeCanvasSurface('foo');
		  const canvas3 = surface3.getCanvas()

	    console.log("====> timeout")
    	canvas3.drawRRect(rr3, paint);
			console.log("====> FLUSHS")
			//canvas3.clear(CanvasKit.RED);
      surface3.flush()
    }, 0);

    
  });
</script>