JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

HTML

<script src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>
<canvas id="yesican" width="800" height="600"></canvas>

JavaScript

async function start() {
	const CanvasKit = await CanvasKitInit({
     locateFile: (file) => 'https://unpkg.com/[email protected]/bin/'+file,
	});
  const realCanvas = document.getElementById("yesican");
  const lessRealCanvas = document.createElement("canvas");
  lessRealCanvas.width=800;
  lessRealCanvas.height = 600;
  const surf = CanvasKit.MakeCanvasSurface(lessRealCanvas);
  
  const hackCanvas = CanvasKit.MakeCanvas(1,1);
  const HTMLCanvas = hackCanvas.constructor;
  const skiaCanvas = new HTMLCanvas(surf);
  const skiaCtx = skiaCanvas.getContext("2d");
  skiaCtx.fillStyle = 'red';
  skiaCtx.fillRect(100,100,500,500);
  
  const realCtx = realCanvas.getContext("2d");
  surf.flush();
  realCtx.drawImage(lessRealCanvas, 0,0);
}
window.onload = start;