PixiJS Compare Miter Limit

WebGL and Context2D comparison for miterLimit property.

by ShukantPal

HTML

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

CSS

canvas {
  border: 1px solid #ccc;
  margin: 5px;
}

body {
  text-align: center;
  font-family: Arial, sans-serif;
  background: #eee;
  color: #999;
}

input {
  border: 1px solid #ccc;
  background: white;
  font-size: 16px;
  width: 100px;
}

JavaScript

const $ = document.querySelector.bind(document);
const $miterLimit = $("#miterLimit");
const lines = new PIXI.Graphics();
const webgl = createExample(false);
const canvas = createExample(true);

webgl.view.className = 'webgl';
canvas.view.className = 'canvas';

document.body.appendChild(webgl.view);
document.body.appendChild(canvas.view);

function draw() {
	updateMiterLimit();
  webgl.stage.addChild(lines);
  webgl.render();
  canvas.stage.addChild(lines);
  canvas.render();
}

function updateMiterLimit() {
  // 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);
  }
}

function createExample(forceCanvas) {
	return new PIXI.Application({
    width: 150,
    height: 150,
    backgroundColor: 0xffffff,
    forceCanvas,
    autoStart: false,
    resolution: 2,
    autoDensity: true
  });
}


$miterLimit.valueAsNumber = 10;

draw();

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