StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 canvas drawing being overwritten
text
Body
copied!<p>I have an HTML5 canvas that allows user to draw various shapes and a brush feature allowing the user to freehand. I am using the command pattern for these implementations. The problem I am facing is the "undo" functionality. It works perfectly fine for all the other commands however when it comes to the "brush" there seems to be an issue with it. </p> <p>The way the brush works is it stores points with each drag of the mouse, once a new point is added the entire array of points are redrawn on the screen. Only when the user releases the mouse does the drawing stop. You can probably see the problem immediately, the older the points the more they get redrawn on the screen. This causes the line to look much darker in color than it actually is. </p> <p>My solution is to only connect the last point n-1 with point n-2 however that literally only redraws the last 2 points. I do not understand fully how the canvas is working and why this method does not work YET redrawing overtop points seems to work...</p> <p>Here is some code outlining the key parts. </p> <pre><code>BrushStrat.prototype.mousemove=function(event){ if(this.command!=null){ //add this point to the list this.command.addPoint({x:event.canvasX, y:event.canvasY}); //redraw all points this.command.draw(this.paint.context); } } BrushCommand.prototype.draw=function(context){ if(this.points.length==0){ return; } context.beginPath(); context.strokeStyle = this.strokeStyle; context.lineWidth=this.lineWidth; //start from the first point context.moveTo(this.points[0].x,this.points[0].y); //redraw all subsequent points for(var i=1;i<this.points.length;i++){ context.lineTo(this.points[i].x, this.points[i].y); } context.stroke(); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload