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();.