JSFiddle - React, Tailwind, and code Playground

by ShukantPal

HTML

<script src="https://pixijs.download/dev-graphics/pixi-legacy.js"></script>
<canvas id="canvas" width="150" height="150"></canvas><br>
<label for="miterLimit">miterLimit</label>
<input type="number" id="miterLimit" />

JavaScript

const $ = document.querySelector.bind(document);
const $canvas = $('#canvas');
const $miterLimit = $("#miterLimit");

const app = new PIXI.Application({
	view: $canvas,
  width: 150,
  height: 150,
  backgroundColor: 0xffffff,
  forceCanvas: false
});

const lines = new PIXI.Graphics();
app.stage.addChild(lines);

function draw() {
 
  // Clear canvas
  lines.clear();
  lines.lineStyle({ color: 0x0099ff, width: 2 });
  lines.drawRect(-5, 50, 160, 50);
 
  // Lines
  lines.lineStyle({
  	width: 10,
    color: 0x0,
    miterLimit: $miterLimit.valueAsNumber,
  });
 
  lines.moveTo(0, 100);
  for (i = 0; i < 24 ; i++) {
    var dy = i % 2 == 0 ? 25 : -25;
    lines.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
  }
}

$miterLimit.valueAsNumber = 10;

draw();

$miterLimit.addEventListener('change', draw);