Line draw with dot issue

[akamdar]

I am using easelJS for drawing on canvas. While drawing a line, it generate multiple dots on the line.

[lannymcnie]

This looks like you are drawing lineTo commands on mousemove. If your line is partially transparent, this will be the result.

[akamdar]

@lannymcnie my code is as below.

 scope.init = function(){
  stage = new createjs.Stage(element[0].id);
  stage.enableDOMEvents(true);
  createjs.Touch.enable(stage);
  shellWrapper = new createjs.Container();
  shellWrapper.id = mainContainerId;
  shellWrapper.hitArea = new createjs.Shape(new createjs.Graphics().f('#000').dr(0,0,cacheWidth,cacheHeight));
  shellWrapper.cache(0,0,cacheWidth,cacheHeight); // Cache it.
  stage.addChild(shellWrapper);
  drawing = new createjs.Shape();
  shellWrapper.addChild(drawing);
  stage.update();
}

scope.mouseDown = function(event) {
  oldX = event.stageX;
  oldY = event.stageY;

  shellWrapper.addEventListener('pressmove', function(evt){

	drawing.graphics.beginStroke(color)
		.setStrokeStyle(size, 'round')
		.moveTo(oldX, oldY)
		.lineTo(evt.stageX, evt.stageY);

	oldX = evt.stageX;
	oldY = evt.stageY;
	shellWrapper.updateCache(erase?'destination-out':'source-over');
	drawing.graphics.clear();
	stage.update();
  });
};

[gskinner]

By using moveTo, beginStroke, and setStrokeStyle each pressmove, your code is drawing a brand new path each time. With the alpha applied, the overlapping portions of these segments appears darker, which is why you see the dots.

If color and size don't change during a single press, then you should be able to solve this by only calling moveTo, etc on mouse down, and then lineTo on pressmove.

[akamdar]

@gskinner size is not static. We have three different options when user select pen/highlighter size. I have tried with your approach but the size remains same. We have two options for draw, 1) Pen and 2) Highlighter. So for highlighter, I am using alpha value (0.3).

drawing.graphics.beginStroke(color)
.setStrokeStyle(size, 'round')
.moveTo(oldX, oldY);

shellWrapper.addEventListener('pressmove', function(evt){
      drawing.graphics.lineTo(evt.stageX, evt.stageY);

[lannymcnie]

Closing since this is not a bug.

Feel free to reopen with a specific question or bug report.