HTML5帆布油漆优化油漆，不会有滞后

Question

我的问题然后我画的时间超过20秒开始滞后。我认为因为它有很多分数。我怎么能优化它？绘图线必须像示例一样平滑，但我有滞后：/

var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 10;
ctx.lineJoin = ctx.lineCap = 'round';
ctx.globalAlpha = "0.2";
ctx.strokeStyle = "red";

var isDrawing, points = [ ];

el.onmousedown = function(e) {
  isDrawing = true;
  points.push({ x: e.clientX, y: e.clientY });
};

el.onmousemove = function(e) {
  if (!isDrawing) return;

  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  points.push({ x: e.clientX, y: e.clientY });

  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);
  for (var i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
    
  }
  
  ctx.stroke();
  ctx.clearPath();
  
};

el.onmouseup = function() {
  isDrawing = false;
  points.length = 0;
};

canvas { border: 1px solid #ccc }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="c" width="500" height="300"></canvas>