JSFiddle - React, Tailwind, and code Playground

by pedro_g_s

HTML

<canvas id=foo width=30020 height=300></canvas>
<canvas id=foo2 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 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);
  
    
    window.requestAnimationFrame(() => {
		console.log("=====> drawing red canvas")      
    const surface4 = CanvasKit.MakeCanvasSurface('foo2');
		const canvas4 = surface4.getCanvas()
	  canvas4.clear(CanvasKit.RED);
    surface4.flush();
    surface4.dispose();
    });
    
    window.requestAnimationFrame(() => {
    const surface3 = CanvasKit.MakeCanvasSurface('foo2');
    const canvas3 = surface3.getCanvas()
    console.log("=====> drawing blue canvas")
      canvas3.clear(CanvasKit.BLUE)
      canvas3.drawRRect(rr, paint);
      canvas3.drawRRect(rr2, paint);
      surface3.flush();
	    surface3.dispose();
    })
    
  
      window.requestAnimationFrame(() => {
  	console.log("=====> drawing green canvas")
    const surface = CanvasKit.MakeCanvasSurface('foo');
    const canvas = surface.getCanvas();
    canvas.clear(CanvasKit.GREEN);
    canvas.drawRRect(rr, paint);    
    surface.flush();
    
    surface.dispose();
    });
  });
</script>