Острые края при рисовании на холсте с помощью Jquery

Question

Я практикую, как использовать и рисовать на холсте, используя jquery, но я получаю острые края при перемещении мыши (как показано ниже), есть ли способ получить плавные края при рисовании в jquery?Помощь приветствуется и спасибо заранее:).

jquery

var canvas;
var ctx;
// var points;
var brush = {
  x: 0,
  y: 0,
  color: '#000000',
  size: 4,
  down: false
};

var strokes = []; // for storing prev strokes
var currentStroke = null // current stroke

function redraw() {

  ctx.clearRect(0, 0, canvas.width(), canvas.height());
  ctx.lineCap = 'round';

  for (var i = 0; i < strokes.length; i++) {
    var s = strokes[i];
    ctx.strokeStyle = s.color;
    ctx.lineWidth = s.size;
    ctx.beginPath();

    ctx.moveTo(s.points[0].x, s.points[0].y);
    for (var j = 0; j < s.points.length; j++) {
      var p = s.points[j];
      ctx.lineTo(p.x, p.y);
    }
    ctx.stroke();
  }

}

function init() {
  canvas = $('#draw');
  canvas.attr({
    width: window.innerWidth,
    height: window.innerHeight,
  })
  ctx = canvas[0].getContext('2d');
  // console.log(ctx,"this is ctx");


  // function mouseEvent(e) {
  //     console.log(e.pageX,"Xval");
  //     console.log(e.pageY,"Yval");
  //     brush.x = e.pageX;
  //     brush.y = e.pageY;

  //     currentStroke.points.push({
  //         x: brush.x,
  //         y: brush.y
  //     });

  //     redraw();

  // }

  // adding mouseEvent listerners,
  canvas.mousedown(function(e) {

    brush.down = true;

    brush.x = e.pageX;
    brush.y = e.pageY;


    currentStroke = {
      color: brush.color,
      size: brush.size,
      points: []
    };

    currentStroke.points.push({
      x: brush.x,
      y: brush.y
    })

    redraw();
    // mouseEvent(e);
    //now we have to push this to strokes which keeps track of preveous data

    strokes.push(currentStroke);




  }).mouseup(function(e) {
    brush.down = false;

    brush.x = e.pageX;
    brush.y = e.pageY;

    currentStroke.points.push({
      x: brush.x,
      y: brush.y
    })

    currentStroke = null;
    redraw();


  }).mousemove(function(e) {

    if (brush.down) {
      brush.x = e.pageX;
      brush.y = e.pageY;

      currentStroke.points.push({
        x: brush.x,
        y: brush.y
      });

      redraw();

    }
  })

  $('#save-btn').click(function() {
    window.open(canvas[0].toDataURL());
  });

  $('#undo-btn').click(function() {
    strokes.pop();
    redraw();
  });
  $('#color-picker').on('input', function() {
    brush.color = this.value;
  });
  $('#brush-size').on('input', function() {
    brush.size = this.value;
  })

}







$(init); //... (when document is ready)(calling the function)

Ниже приведен мой вывод, на котором края острые.Выше приведен код, который я практикую.Я использовал Jquery, HTML Canvas. Это мой вывод