JSFiddle - React, Tailwind, and code Playground

by DynamsoftTeam

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>DBRJS - Draw Shapes</title>
    <script src="https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@3.0.1/dist/dce.js"></script>
  </head>

  <body style="width:80vw; height:600px; margin: 0 auto"><br />

    <button id="drawShapes">Click to Draw Shapes</button><br /><br />
    <div id="enhancerUIContainer" style="width:100%; height:100%;"></div>
    <script>
      let enhancer = null;
      document.getElementById('drawShapes').onclick = drawShapes;
      (async () => {
        enhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance();
        await enhancer.open();
        document.getElementById("enhancerUIContainer").appendChild(enhancer.getUIElement());
      })();

      function drawShapes() {
        let drawingLayer = enhancer.createDrawingLayer();
        let newDrawingStyleID = enhancer.createDrawingStyle({
          lineWidth: 5,
          paintMode: "strokeAndFill",
          fontSize: 100,
          fillStyle: "rgba(65, 105, 225, 0.5)",
          strokeStyle: "rgba(65, 105, 225, 1)",
          fontFamily: "Consolas"
        });
        drawingLayer.setDrawingStyle(newDrawingStyleID);
        let rect = new Dynamsoft.DCE.DrawingItem.DT_Rect(50, 50, 300, 300);
        let arc = new Dynamsoft.DCE.DrawingItem.DT_Arc(840, 150, 100, 0, 360);
        let line = new Dynamsoft.DCE.DrawingItem.DT_Line({
          x: 600,
          y: 600
        }, {
          x: 1050,
          y: 400
        });
        let text = new Dynamsoft.DCE.DrawingItem.DT_Text("TESTING...", 360, 360);
        let image = new Dynamsoft.DCE.DrawingItem.DT_Image(document.getElementById('testIMG'), 150, 600);
        let polygon = new Dynamsoft.DCE.DrawingItem.DT_Polygon([{
          x: 640,
          y: 100
        }, {
          x: 500,
          y: 300
        }, {
          x: 780,
          y: 300
        }, {
          x: 690,
          y: 100
        }]);
        drawingLayer.addDrawingItems([rect, arc, line, text, image,...