let painting = false;

let colors = [  "#000000",  "#FF0000",  "#00FF00",  "#0000FF",  "#FFFF00",  "#00FFFF",  "#FF00FF",  "#FFFFFF"];

let buttonSize = 40;

​

function setup() {

  canvas = createCanvas(600, 400);

  canvas.mousePressed(startPainting);

  canvas.mouseReleased(stopPainting);

​

  // Draw color buttons at the top of the canvas

  let buttonSpacing = (width - (colors.length * buttonSize) - buttonSize) / (colors.length + 2);

  for (let i = 0; i < colors.length; i++) {

    let x = buttonSpacing + i * (buttonSize + buttonSpacing);

    fill(colors[i]);

    ellipse(x, buttonSize + 10, buttonSize, buttonSize);

  }

​

  // Draw clear button to the right of the color buttons

  fill("#AAAAAA");

  rect(width - buttonSize - buttonSpacing, buttonSize + 10 - buttonSize / 2, buttonSize, buttonSize);

}

​

function startPainting() {

  painting = true;

  strokeWeight(4);

}

​

function stopPainting() {

  painting = false;

}

​

function draw() {

  if (painting) {

    line(mouseX, mouseY, pmouseX, pmouseY);

  }

​

  // Change stroke color based on the current mouse position relative to the buttons

  let buttonSpacing = (width - (colors.length * buttonSize) - buttonSize) / (colors.length + 2);

  for (let i = 0; i < colors.length; i++) {

    let x = buttonSpacing + i * (buttonSize + buttonSpacing);

    let distance = dist(mouseX, mouseY, x, buttonSize + 10);

    if (distance <= buttonSize / 2) {

      stroke(colors[i]);

      break;

    }

  }

​

  // Clear canvas if clear button is clicked

  if (

    mouseX >= width - buttonSize - buttonSpacing &&

    mouseX <= width - buttonSpacing &&

    mouseY >= buttonSize + 10 - buttonSize / 2 &&

    mouseY <= buttonSize + 10 + buttonSize / 2 &&

    mouseIsPressed

  ) {

    clear();

    setup();

  }

}

​