JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>
<script src="https://unpkg.com/[email protected]/bin/canvaskit.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>
<div class="parent">

</div>

CSS

canvas {
  border: 1px solid black;
}

.parent {
  display: flex;
}

JavaScript

const text = "adilshaikhismyname";
  const dimens = 400;
  const cell = 20;
  let increment = 5;
  const app = new PIXI.Application({
    width: dimens,
    height: dimens,
    backgroundColor: 0xCCCCCC,
    antialias: true,
    resolution: 1
  })

  /* document.body.appendChild(app.view); */

  const richText = new PIXI.Container();
  app.stage.addChild(richText);

  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')
    .then((response) => response.arrayBuffer());

  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: cell,
        },
        textAlign: CanvasKit.TextAlign.Left,
      });

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

      skcanvas.clear(CanvasKit.WHITE);

      const text = "adilshaikh";
      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();
    });