function pen(position){

  context.strokeStyle = attribute.color;
  context.lineJoin = context.lineCap = 'round';  
  context.fillStyle = attribute.color;
  context.lineWidth = attribute.width;
  context.lineTo(position.x,position.y);
  context.stroke();
  context.beginPath();
  context.arc(position.x,position.y,attribute.width/2,0,Math.PI*2);
  context.fill();
  context.beginPath();
  context.moveTo(position.x,position.y)
}
//simple pen style (continuous dots joined by lines)
simple pen style (continuous dots joined by lines)
simple pen style ( continuous dots joined by lines )
function pen(position){
  context.strokeStyle = attribute.color;
  context.lineJoin = context.lineCap = 'round';  
  context.fillStyle = attribute.color;
  context.lineWidth = attribute.width;
  context.lineTo(position.x,position.y);
  context.stroke();
  context.beginPath();
  context.arc(position.x,position.y,attribute.width/2,0,Math.PI*2);
  context.fill();
  context.beginPath();
  context.moveTo(position.x,position.y)
}
function pen ( position ) { context . strokeStyle = attribute . color ; context . lineJoin = context . lineCap = 'round' ; context . fillStyle = attribute . color ; context . lineWidth = attribute . width ; context . lineTo ( position . x , position . y ) ; context . stroke ( ) ; context . beginPath ( ) ; context . arc ( position . x , position . y , attribute . width / 2 , 0 , Math . PI * 2 ) ; context . fill ( ) ; context . beginPath ( ) ; context . moveTo ( position . x , position . y ) }
simple pen style (continuous dots joined by lines)
simple pen style ( continuous dots joined by lines )