JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="900" height="500"></canvas>

JavaScript

const main = () => { 
 
   const {T, now, log, mlong} = timeline(); //load the library

   const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');
    const draw = ([x0, y0], [x1, y1]) => {
      ctx.beginPath();
      ctx.moveTo(x0, y0);
      ctx.lineTo(x1, y1);
      ctx.closePath();
      ctx.stroke();
    };

    const btnTimeline = T((timeline) => {
      canvas.onmousedown = (e) => timeline[now] = 1;
      canvas.onmouseup = (e) => timeline[now] = 0;
    });

    const pointTimeline = T((timeline) => {
      canvas.onmousemove = (e) => timeline[now] = [e.clientX, e.clientY];
    })
    
    const pipeline = pointTimeline
      .sync((point) => (btnTimeline[now] === 1)
        ? draw(lastPointTimeline[now], point)
        : true);

    const lastPointTimeline = T((timeline) => {
      pointTimeline.sync(point => {
        timeline[now] = point;
      });
    });
    
};    
    
    
// the below is timeline library    
const timeline = () => {
  "use strict";
 
  const freeMonoid = (operator) => (() => {
  const flattenDeep = (arr1) => arr1
    .reduce((acc, val) => Array.isArray(val)
      ? acc.concat(flattenDeep(val))
      : acc.concat(val), []);
  const M = (() => { //(M)(a)(b)
    const toList = arr => arr.reduce((a, b) => (a)(b), (M));
    const m = (a) => (Array.isArray(a))
      ? toList(flattenDeep(a))
      : (!!a && !!a.M)
        ? (a)
        : (() => {
          const ma = b => (b === m) // right id
            ? (ma)
            : !b.M
              ? (ma)(M(b))
              : (() => {
                const mab = M();
                mab.units = ma.units.concat(b.units);
                mab.val = mab.units.map(unit => unit.val[0]);
                return mab; // (m)(a)(b)
              })();
          ma.M = m;
          ma.val = [a];
          ma.units = [ma];
          operator(ma);
          return ma;
        })();
    m.M = m;
    m.val = [m]; //["__IDENTITY__"];
    m.units = [m];
    operator(m);
...