javascript - How to place html elements at the mouse position when it moves, without lag? -

i'm working on web-based drawing app not use canvas. reason avoiding using canvas, because going add css keyframes html elements placed. allows me keep track of each individual div, can give them incrementing ids.

the way placing divs, jquerys's .on("mousemove")... problem running if move mouse fast, creates gaps in line.

the question have whether there way generate line between gaps.

i made jsfiddle snippet of code. https://jsfiddle.net/themejared/d16yjg9l/

thanks, jared.

var mouseposx, mouseposy, style, circle;  var windowheight = $(window).height(), // height of entire window     windowwidth = $(window).width(); // width of entire window  $(document).on("mousemove", function (event) {     mouseposx = event.pagex; // px amount of mouse pos     mouseposy = event.pagey; // px amount of mouse pos     style = "top:" + (mouseposy - ($('#circle').height() / 2)) + "px; left: " + (mouseposx - ($('#circle').width() / 2)) + "px;";     $("<div id='circle' style='" + style + "'></div>").appendto('#drawpad'); }); 

since know every mouse event, can save context of previous event , calculate distance between 1 , previous. can add number of circles along line between previous , current position. dont need more events generate line.