see here for original idea https://gist.github.com/mattdesl/b7c9665b142810f506bf9e4b6c68660f

DrawMesh.txl

<script>
import { Props, Color, Slider } from "txl";

export let positions = [];
export let cells = [];

export let strokeStyle = '#000000';
export let lineJoin = 'round';
export let lineCap = 'round';
export let lineWidth = 1;

function render ({ context, width, height }) {
  cells.forEach(cell => {
    context.beginPath();
    cell.forEach(i => {
      const p = positions[i];
      context.lineTo(p[0], p[1]);
    });
    context.closePath();
    context.strokeStyle = strokeStyle;
    context.lineWidth = lineWidth;
    context.lineJoin = lineJoin;
    context.lineCap = lineCap;
    context.stroke();
  });
}
</script>

<Props>
  <Color label='Color' bind:value={strokeStyle} />
  <Slider label='Thickness' bind:value={lineWidth} min={0.5} max={11} step={0.01} />
</Props>

DrawPoints.txl

<script>
import { Props, Color, Slider } from "txl";

export let positions = [];
export let radius = 1;
export let fillStyle = '#000000';

function render ({ context, width, height }) {
  positions.forEach(position => {
    context.beginPath();
    context.arc(position[0], position[1], radius, 0, Math.PI * 2);
    context.fillStyle = fillStyle;
    context.fill();
  });
}
</script>

<Props>
  <Color label='Color' bind:value={fillStyle} />
  <Slider label='Radius' bind:value={radius} min={0.5} max={50} step={0.01} />
</Props>

Triangulator.txl

<script>
import { Button } from "txl";
import triangulate from "delaunay-triangulate";
import DrawMesh from '@mattdesl/components/DrawMesh.txl';
import DrawPoints from '@mattdesl/components/DrawPoints.txl';

let positions = [];
let cells = [];

// whenever positions change, we update cells
// this is a 'reactive declaration' from Svelte
// https://svelte.dev/tutorial/reactive-declarations
$: cells = triangulate(positions);

function mousePressed (x, y) {
  const pos = [ x, y ];
  positions = [ ...positions, pos ];
}
</script>

<Props>
  <Button text='Clear Points' on:click={() => { positions = []; }} />
</Props>

<DrawMesh {positions} {cells} />
<DrawPoints {positions} />