let clearButton;

​

function setup() {

  createCanvas(600, 300);

  push();

  fill(240);

  console.log(width*.1);

  console.log(width - (width*.1));

  rect(width*.1,40,width - (width*.1), width / 3);

  pop();

  colorPicker = createColorPicker(color(65,27,253));

  colorPicker.position(width*.1, 0);

  push();

  textSize(15);

  noStroke();

  text("<-- Pick a color here, then sign below:", (width*.1)+ 60,17);

  pop();

  clearButton = createButton("clear");

  clearButton.position(width*.1, width /3 + 50);

  clearButton.mousePressed(clearCanvas);

}

​

function draw() {

}

​

​

function mouseDragged(){

  if (mouseX < width*.1 || mouseX > width - (width*.1)){ // BUG HERE ON RIGHT SIDE

      return;

  }

  if (mouseY < 40 || mouseY > width/3 + 40){

      return;

  }

  push();

  strokeWeight(10);

  stroke(colorPicker.color());

  line(mouseX, mouseY, pmouseX, pmouseY);

  stroke(0);

  pop();

  return false;

}

​

function clearCanvas(){

  push();

  fill(240);

  rect(width*.1,40,width - (width*.1), width / 3);

  pop();

}