How can I prevent fast mouse movement from breaking a line in my drawing app?

Question

I'm working on a script that allows the user to draw with the mouse: http://jsfiddle.net/ujMGu/

The problem: If you move the mouse really fast it jerks and skips a few places. Is there any way to capture all the points without any skipping black spaces in between the drawing line?

CSS

#myid{background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: block;
    height: 1000px;
    margin: 3%;
    position: relative;
    text-indent: -1100px;}​

JS/JQ

$('#myid')
.css('position','relative')
.unbind().die()
.bind('mousemove mouseover',function (e){
var top = parseInt(e.pageY)-$(this).offset().top;
var left= parseInt(e.pageX)-$(this).offset().left;
var pixel= $('<div></div>')
  .css({
      width:10,height:10,
      background: '#fff',
      position:'absolute',
      top: top, left: left,
      'border-radius': 2
  });
  $(this).append(pixel);
});​

HTML

<div id="myid"></div>

Answer 1

Check this out: http://jsfiddle.net/KodeKreachor/9DbP3/6/

The following object on the given link contains the algorithm:

var drawer = new Drawer();

Let me know if you have any questions as to how I did it. The premise is based on Bresenham's line algorithm and should be compatible in older browsers as well.