I'm working on a script that allows the user to draw with the mouse: /

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>

I'm working on a script that allows the user to draw with the mouse: http://jsfiddle/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>

• javascript
• html
• jquery
• css
• mouse-cursor

Share Improve this question Follow edited Dec 30, 2021 at 13:22 General Grievance 5,0433838 gold badges3737 silver badges5656 bronze badges asked Mar 6, 2012 at 16:31 ValVal 17.5k2424 gold badges9898 silver badges148148 bronze badges 4

• 1 Probably a bad idea to do this with divs; consider using a canvas instead. Most browsers will be faster with canvas than divs, since divs require DOM manipulation rather than mere raster painting. – Phil H Commented Mar 6, 2012 at 16:44
• painting in this manner (using divs as pixels) is fairly limited. What are your requirements and what browser support do you need? Is there a reason you need to use this method rather than (say) canvas? – Gabe Moothart Commented Mar 6, 2012 at 16:47
• coz im not very familiar with canvas, and I need something simple so I can send this accross to other people in a plicated manner, as an overlay/mask on top of something else that is behind it. – Val Commented Mar 6, 2012 at 16:50
• @PhilH Divs can work if you use the right algorithm, Bresenham's is what I used to achieve this for patibility in non-HTLM5 supporting browsers. en.wikipedia/wiki/… – KodeKreachor Commented Mar 15, 2013 at 18:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Check this out: http://jsfiddle/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 patible in older browsers as well.

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

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 plete the line using, for example, Bresenham's line algorithm.