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: 300,
  height: 300,
  backgroundColor: 0xffffff,
  forceCanvas: false,
  resolution: 2,
  autoDensity: true
});

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

function draw() {

  // Clear canvas
  lines.clear();
  lines.lineStyle({
    color: 0x0099ff,
    width: 2
  });
  lines.drawRect(-20, 50, 160, 50);
  lines.scale.set(2);
  lines.x = 20

  // Lines
  lines.lineStyle({
    width: 10,
    color: 0x0,
    miterLimit: $miterLimit.valueAsNumber,
    alignment: .5,
    alpha: .2,
    join: 'miter',
    native: false
  });

  lines.moveTo(0, 100);
  console.log('--break')
  for (i = 0; i < 24; i++) {
  if (i == 2) {
  continue
  }
    var dy = i % 2 == 0 ? 25 : -25;
    lines.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
    console.log((Math.pow(i, 1.5) * 2) + ' , ' + (75 + dy))
  }

  lines.lineStyle({
    visible: false
  })

lines.beginFill(0xff, 0.5);
    lines.drawCircle(0, 100, 4)
    lines.endFill()
  for (i = 1; i < 24; i++) {
    var dy = i % 2 == 0 ? 25 : -25;

    lines.beginFill(0xff, 0.5);
    lines.drawCircle(Math.pow(i, 1.5) * 2, 75 + dy, 4)
    lines.endFill()
  }
}

$miterLimit.valueAsNumber = 10;

draw();

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