Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, then adding dots between those points to form a line.
While this method is effective initially, I have noticed that as I draw more, the process of appending dots to the div slows down, resulting in a noticeable lag in the drawing experience. Even though I am simply doing straightforward appends without any complex document searches for specific elements, the performance is affected.
You can test the functionality on this fiddle: http://jsfiddle.net/u4mn2b84/14/
Could this slowdown be attributed to the increasing number of elements in the document, or is there another factor at play?
Snippet from the code:
$('#sketch-box').on('mousemove', function(e) {
if (isPerformingLeftMouseClick) {
var offset = $(this).offset();
var currentMouseLeft = e.pageX - offset.left;
var currentMouseTop = e.pageY - offset.top;
var linkDotTemp = $(linkDot).clone();
$(linkDotTemp).css('top', currentMouseTop);
$(linkDotTemp).css('left', currentMouseLeft);
if (lastMouseTop != null && lastMouseLeft != null) {
drawLineInBetween(lastMouseTop, lastMouseLeft, currentMouseTop, currentMouseLeft);
}
$(this).append(linkDotTemp);
lastMouseTop = currentMouseTop;
lastMouseLeft = currentMouseLeft;
}
});