캔버스에서 더 많은 커서 위치를 얻는 방법

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
        for(let i=0; i<cursorPositions.length-1; i++)
            cursorPositions[i] = cursorPositions[i+1];
        cursorPositions[99] = {
            x: e.clientX - r.left,
            y: e.clientY - r.top
        };
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}
function interpolate(a, b, dl) {
  const n = d(a,b)/dl
  const nPoints = Math.ceil(n)-1 //1.5 one point middle, 2, one point middle too
  const dx = (b.x - a.x) / (nPoints + 1)
  const dy = (b.y - a.y) / (nPoints + 1)
  const arr = new Array(nPoints)
  for(let i = 1; i <= nPoints; ++i){
    const x = a.x + i*dx
    const y = a.y + i*dy
    arr[i-1] = { x, y }
  }
  return arr
}
function draw(){
    const dl = 10 // 10px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur) => {
        const n = d(last, cur)/dl
        if(n > 1){
          ctx.fillStyle = "red";
          interpolate(last, cur, dl).forEach(({ x, y }) => {
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();   
          })
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});

<canvas id="game"></canvas>

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
      //keep the same points for each bezier curve
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.push({
          x: e.clientX - r.left,
          y: e.clientY - r.top
      })
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}
function b3([P0, P1, P2, P3]) {
  if(!P0 || !P1 || !P2 || !P3) return []
  function add(...v){
    return v.reduce((acc, P) => {
      acc.x += P.x
      acc.y += P.y
      return acc
    }, { x: 0, y: 0 })
  }
  function s(scale, P){
    return { x: P.x*scale, y: P.y*scale }
  }
  const B = t => add(s((1-t)**3, P0), s(3*t*(1-t)**2, P1), s(3*(1-t)*t**2, P2), s(t**3, P3))
  const nPoints = Math.ceil(d(P0, P1) + d(P1, P2) + d(P2, P3))
  const arr = new Array(nPoints)
  let t = 0
  for(let i = 0; i < nPoints; ++i){
    t += 1/nPoints
    arr[i] = B(t)
  }
  return arr
}
function draw(){
    const dl = 1 // 20px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur, i) => {
        const n = d(last, cur)/dl
        if (n > 1 && i % 3 == 0) {
          ctx.fillStyle = "red";
          b3(cursorPositions.slice(i, i+4), dl).forEach(({ x, y }) => {
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fill();   
          })
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}

function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});

<canvas id="game"></canvas>

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let cursorPositions = [];

function getCursorPosition(e){
    let r = canvas.getBoundingClientRect();
    if(cursorPositions.length < 100){
        cursorPositions.push({
            x: e.clientX - r.left,
            y: e.clientY - r.top
        });
    }else{
      //keep the same points for each bezier curve
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.shift()
      cursorPositions.push({
          x: e.clientX - r.left,
          y: e.clientY - r.top
      })
    }
}

function d(a, b){
  return Math.sqrt((b.x - a.x)**2 + (b.y - a.y)**2)
}

function draw(){
    const dl = 1 // 20px max dist between consecutive points
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'white'
    if(cursorPositions.length == 0) return
    cursorPositions.reduce((last, cur, i) => {
        const n = d(last, cur)/dl
        if (n > 1 && i % 3 == 0) {
          const [P0, P1, P2, P3] = cursorPositions.slice(i, i+4)
          if(!P3) return cur
          ctx.beginPath();
          ctx.moveTo(P0.x, P0.y)
          ctx.bezierCurveTo(P1.x, P1.y, P2.x, P2.y, P3.x, P3.y)
          ctx.stroke();   
          ctx.closePath();
        }
        ctx.fillStyle = "#ffffff";
        ctx.beginPath();
        ctx.arc(cur.x, cur.y, 1, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.fill();
        return cur
    })
}
function loop(){
    draw();
    requestAnimationFrame(loop);
}

loop();

document.addEventListener("mousemove", function(e){
    getCursorPosition(e);
});

<canvas id="game"></canvas>