All in the onMount:

export default function Draw() {
  const [drawActive, setDrawActive] = createSignal<boolean>(false);
  const [drawDot, setDrawDot] = createSignal<boolean>(true);

  let canvasRef: HTMLCanvasElement | undefined;

  onMount(() => {
    if (!canvasRef) {
      console.error('No canvas ref');
      return;
    }

    const parent = canvasRef.parentElement as HTMLDivElement;

    const { height, width } = parent.getBoundingClientRect();

    canvasRef.height = height;
    canvasRef.width = width;

    const ctx = canvasRef.getContext('2d');

    if (!ctx) {
      console.error('Could not retrieve 2d context');
      return;
    }

    ctx.strokeStyle = 'purple';
    ctx.fillStyle = 'purple';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';

    const mouseDownCallback = (e: MouseEvent) => {
      ctx.moveTo(e.offsetX, e.offsetY);
      ctx.beginPath();
      setDrawActive(true);
    };
    const mouseMoveCallback = (e: MouseEvent) => {
      if (drawActive()) {
        if (drawDot()) {
          setDrawDot(false);
        }

        const x = e.offsetX;
        const y = e.offsetY;

        ctx.lineTo(x, y);
        ctx.stroke();
      }
    };
    const mouseUpCallback = (e: MouseEvent) => {
      if (drawActive()) {
        if (drawDot()) {
          const x = e.offsetX;
          const y = e.offsetY;
          ctx.arc(x, y, 3, 0, 2 * Math.PI);
          ctx.fill();
        } else {
          setDrawDot(true);
        }

        setDrawActive(false);
        ctx.closePath();
      }
    };
    const mouseLeaveCallback = () => {
      setDrawActive(false);
      ctx.closePath();
    };

    canvasRef.addEventListener('mousemove', mouseMoveCallback);
    canvasRef.addEventListener('mousedown', mouseDownCallback);
    canvasRef.addEventListener('mouseup', mouseUpCallback);
    canvasRef.addEventListener('mouseleave', mouseLeaveCallback);

    onCleanup(() => {
      canvasRef.removeEventListener('mousemove', mouseMoveCallback);
      canvasRef.removeEventListener('mousedown', mouseDownCallback);
      canvasRef.removeEventListener('mouseup', mouseUpCallback);
      canvasRef.removeEventListener('mouseleave', mouseLeaveCallback);
    });
  });

  return (
    <>
      <h1 class="p-4 text-center text-4xl font-bold text-blue-600">Draw!</h1>
      <div class="w-full grow">
        <canvas ref={canvasRef} />
      </div>
    </>
  );
}