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.

Answer 2

You would need to keep track of the previous point and then draw a line between the new point and the previous.

Answer 3

Why not use canvas? It has a number of line drawing utilities:

http://www.w3schools.com/html5/html5_ref_canvas.asp

Answer 4

As @kand has mentioned, a Canvas is really the best tool for drawing.

If you must use your div method, or if this is just for fun, you can extend your approach by saving the previous mouse position and then draw the intervening "pixels" needed to complete the line using, for example, Bresenham's line algorithm.