So I have a canvas and I'm trying to implement a smooth drawing function. First I used lines instead of dots to solve the issue of spaces between drawing points when the user draws too fast. This is my Fiddle.

The core drawing function is in the loop:

if (state.mouse.on) {
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.moveTo(
      state.last.x ? state.last.x : state.mouse.x,
      state.last.y ? state.last.y : state.mouse.y
    );
    ctx.lineTo(state.mouse.x, state.mouse.y);
    ctx.stroke();

    state.last = { x: state.mouse.x, y: state.mouse.y };
  }

The problem is, if you draw too fast and curvy (i.e., try to draw a circle as fast as you can), you can see the lines are not "curvy" enough, of course, cause the loop runs as many time as the browser let's it, and it might no be enough to make lines smooth.

So, is there a way to solve this? I tried using the bezier function, and storing the last positions of the mouse then running the function but it only create wavy lines lol.

I'm not good at math, so I can't really speak but I think I need some kind of interpolating function?