Orbit of Mouse Drag
function onMouseDrag(event){ path.add(event.middlePoint); }
event.middlePoint describes the point in the middle between event.lastPoint and event.point.
Drawing points on both sides of orbit
function onMouseDrag(event){ var step = event.delta / 2; step.angle += 90; var top = event.middlePoint + step; var bottom = event.middlePoint - step; path.add(top); path.insert(0,bottom); path.smooth(); }
Drawing various lines and shapes
Zigzag lines
function onMouseDrag(event){ var step = event.delta / 2; step.angle += 90; //step.angle += Math.random() * 360; var top = event.middlePoint + step; var bottom = event.middlePoint - step; path.add(top); path.add(bottom); //path.insert(0,bottom); path.smooth(); }
not insert, but add
Connecting top point and bottom point. Remove onMouseUp function.
Closed zigzag path
path.fillColor = new Color({ hue:Math.random() * 360, saturation:1, brightness:1 });
Using fillColor , not strokeColor.
Mess lines
function onMouseDrag(event){ var step = event.delta / 2; //step.angle += 90; step.angle += Math.random() * 360; var top = event.middlePoint + step; var bottom = event.middlePoint - step; path.add(top); //path.add(bottom); path.insert(0,bottom); path.smooth(); }
You can chage stroke width by using insert.