JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>
<canvas id="foo3"></canvas>

JavaScript

const ckLoaded = CanvasKitInit({
    locateFile: file => `https://unpkg.com/[email protected]/bin/${file}`
  });

  const loadFont = fetch('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf')

Promise.all([ckLoaded, loadFont])
    .then(([CanvasKit, robotoData]) => {

      const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
      const paraStyle = new CanvasKit.ParagraphStyle({
        textStyle: {
          color: CanvasKit.BLACK,
          fontFamilies: ['Roboto'],
          fontSize: 28,
        },
        textAlign: CanvasKit.TextAlign.Left,
      });

      const temp = document.createElement("canvas");
      temp.width = cell;
      temp.height = cell;
      const surface = CanvasKit.MakeCanvasSurface(temp);
      const skcanvas = surface.getCanvas();

      text.split("").forEach((it, index) => {

        skcanvas.clear(CanvasKit.WHITE);

        const text = it;
        const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
        builder.addText(text);
        const paragraph = builder.build();
        paragraph.layout(dimens); // width in pixels to use when wrapping text
        skcanvas.drawParagraph(paragraph, 0, 0);
        surface.flush();

  
      })
    });