canvas onMouseMove跳帧？

Question

我正在用JavaScript编写一个绘图应用程序（MS Paint克隆）用于教育目的。简而言之，我在canvas元素上设置了一个onMouseMove处理程序，在其中，如果鼠标是向下的，我会绘制鼠标所在的任何像素。问题是，除非我非常，非常，非常缓慢地移动鼠标，否则它将跳过几个点。这几乎就好像浏览器没有足够快地触发鼠标事件回调。

我怎样才能克服这个？

我甚至尝试使画布非常小（100x100），但同样的行为表现出来。我正在使用全新的Mac Book Pro（2016），所以我不确定问题出在我的硬件上。

canvas.el.addEventListener('mousemove', function (event) {
  if (!mouseDown) {
    return;
  }

  var x = event.offsetX;
  var y = event.offsetY;
  plot(tools.selected, canvas, x, y);
});

function plot(tool, canvas, x, y) {
  var kernel = [];

  if (tool === 'pencil') {
    kernel.push([x, y]);
  } else if (tool === 'brush') {
    for (var w = -5; w < 5; w++) {
      for (var h = -5; h < 5; h++) {
        kernel.push([x - w, y - h]);
      }
    }
  }

  if (kernel.length > 0) {
    kernel.map(function (pt) {
      canvas.ctx.fillRect(pt[0], pt[1], 1, 1);
    });
  }
}

// Setting mouseDown
canvas.el.addEventListener('mousedown', function (event) {
  mouseDown = true;
  var x = event.offsetX;
  var y = event.offsetY;
  plot(tools.selected, canvas, x, y);
});

canvas.el.addEventListener('mouseup', function () {
  mouseDown = false;
});