Part A. Node Canvas - darenl/etch-a-sketch GitHub Wiki
1. Where in this code does the drawing occur?
The code occurs in the client.js in the socket event, 'new-pos'.
socket.on('new-pos', function(newPosition) { // handling new sensor values
if(firstMessage){ // if its the first message store that value as previous
firstMessage=false;
previousPosition=newPosition;
}else{ // any other message we use to draw.
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.fillStyle = ctx.strokeStyle = COLOUR;
ctx.lineWidth = radius;
ctx.beginPath(); //begin a adrawing
ctx.moveTo( previousPosition[0], previousPosition[1] ); // from
ctx.lineTo( newPosition[0], newPosition[1]); // to
ctx.stroke(); // and only draw a stroke
previousPosition=newPosition; // update to the new position.
}
});
2. What are the inputs to the drawing function?
The input to the drawing function is a newPosition array, in which the first index contains the x-value and the second index contains the y-value.
3. How can the screen be cleared?
The socket event, 'reset', will clear the drawing context.
socket.on('reset', function() { // on a 'reset' message clean and reste firstMessage
firstMessage=true;
ctx.clear();
});
The actual line of code that clears the context is ctx.clear();
.