Drawing to canvas like in paint

Question

I have three arrys:

 clickX = [],
    clickY = [],
    clickDrag = [];

this is what happens when you click down:

$(\'#canvasCur         


        

Answer 1

Here’s how to use canvas to draw like Paint

If you want an undo feature, your best option is to record all line segments drawn by the user.

This is done with a point array that contains all points (polylines) drawn by the user.

To track the brush size and brush color, you need to include this info in your array also.

So each element of the the array will have this info about each line segment:

• x: the ending x coordinate of this line segment
• y: the ending y coordinate
• size: the brush size (lineWidth)
• color: the brush color (strokeStyle)
• mode: “begin” indicates the beginning of a new line, “end” indicates the end of this line.

How does it work?

When the user is drag-drawing a line segment, each mousemove event is extending the current segment with context.lineTo and context.stroke.

When the user selects a new BrushSize or BrushColor, context.beginPath starts context.beginPath.

When the user holds down the Undo button, the last point in the last line segment is popped off the point array. Then all the surviving line segments are redrawn. The undo button fires every 1/10th of a second when held down.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/AEYYq/

 










    
Drag to draw. Use buttons to change lineWidth/color
    

    Hold this button down to Undo


    5px Brush
    10px Brush
    Red Brush
    Blue Brush