Draw Something JS - Part #2

In my previous post, I talked about how to draw lines with different widths and colors on HTML5 canvas elements, very easy!

View my full demo

In this post, We will discuss about how to record the user movements and "play" it on the canvas.

The main idea is to save each mouse position to an array, loop over the array and paint on the canvas element.

The Array definition in Javascript: 

var recordDataArray = []; // best practice to use [] instead of new Array();

On each mousedown/mousemove event we need to push to the array the following data:

• mouse x position
• mouse y position
• event type (mousedown to begin a new line path or mousemove to continue the line path on the canvas)
• line color
• line width

Define the event type enum in Javascript:

var DrawEventType = {
    START: 0,
    MOVE: 1
}

Now, We will modify our functions from the previous post to push the data to the array:

 var startPaintWithMouse = function(event) {
            mouseState = 1;
            brushCtx = board.getContext('2d');
            brushCtx.beginPath();
            brushCtx.lineWidth = lineWidth;
            brushCtx.strokeStyle = color;
            brushCtx.moveTo(event.offsetX,event.offsetY);
            // push to array
            recordDataArray.push({
                  type: DrawEventType.START,
                  x:event.offsetX,
                  y:event.offsetY,
                  color:color,
                 width:lineWidth
             });
};

var movePaintWithMouse = function(event) {
             if (mouseState == 1) {
                   event.preventDefault();
                   brushCtx = board.getContext('2d');
                   brushCtx.lineTo(event.offsetX,event.offsetY);
                   brushCtx.stroke();
                   recordDataArray.push({                            type:DrawEventType.MOVE,
                            x:event.offsetX,
                            y:event.offsetY,
                            color:color,
                            width:lineWidth
                   });
            }
};

We can create a button that clear the canvas.

Clearing the canvas in Javascript is easy too:

var brushCtx = board.getContext('2d');
brushCtx.clearRect(0, 0, board.width, board.height);

And now, we can create a play button that loop over the array and paint the user movements on the canvas.

We need to use the setInterval javascript method to give the user the drawing experience.

var playDataArray = function(dataArray,speed) {
            var dataIndex = 0;
            var playInterval = setInterval(function(){
                   if (typeof(dataArray[dataIndex]) == 'object') {
                            drawDataObject(dataArray[dataIndex]);
                            dataIndex++;
                   } else {
                            clearInterval(playInterval);
                   }
            },speed);
};

On each interval iteration we call the drawDataObject method which gets an object from our array and draw it.

var drawDataObject = function(data) {
            if (data.type == DrawEventType.START) {
                       brushCtx = board.getContext('2d');
                       brushCtx.beginPath();
                       brushCtx.lineWidth = data.width;
                       brushCtx.strokeStyle = data.color;
                       brushCtx.moveTo(data.x,data.y);
            } else if (data.type == DrawEventType.MOVE) {
                       brushCtx = board.getContext('2d');
                       brushCtx.lineTo(data.x,data.y);
                       brushCtx.stroke();
            }
};

That's all!