If you please, draw me a...

function showCode() {
 document.getElementById('code').style.display = 'inline';
}

function hideCode() {
 document.getElementById('code').style.display = 'none';
}

var color = {
 red: '#f00',
 blue: '#00f',
}

var skillset = {
 drawPaper: function(context) {
  context.fillStyle = color.blue;
  context.fillRect(0, 0, 100, 100);
 },
 drawPencil: function(context) {
  // Eraser Part
  context.fillStyle = color.red;
  context.fillRect(0, 0, 10, 10);
  // Wood Part
  context.fillStyle = color.blue;
  context.fillRect(10, 0, 100, 10);
 },
 drawWeb: function(context) {
  context.beginPath();
  context.arc(50, 50, 50, 0, 2*Math.PI, true);
  context.fillStyle = color.blue;
  context.fill();
 }
}

function Artist(skillset) {
 this.skillset = skillset;
}

Artist.prototype = {
 resetContext: function() {
  this.canvas = document.getElementById("canvas");
  this.context = this.canvas.getContext("2d");
  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
 }, 
 setMethod: function(id) {
  switch(id) {
  case 'pencil':
   this.method = this.skillset.drawPencil;
   return true;
  case 'paper':
   this.method = this.skillset.drawPaper;
   return true;
  case 'web':
   this.method = this.skillset.drawWeb;
   return true;
  default:
   this.method = function() {
    console.log("Can't draw " + id);
   };
   return false;
  }
 },
 draw: function(id) {
  showCode();
  if (this.setMethod(id)) {
   this.resetContext();
   this.method(this.context);
  }
 },
 erase: function() {
  hideCode();
  this.resetContext();
 }
}

var artist = new Artist(skillset);