let cvs = createCanvas(700, 500); // Sets default size and ratio.

  cvs.canvas.style.width='100%';    // 100% width of available space

  cvs.canvas.style.height='auto';

  frameRate(120);

  clearBoard();

}

​

function paintRainbow() {

  strokeWeight(5);

  colorMode(HSB,255);

  stroke(ink, ink, 255);

  colorMode(RGB);

  line(mouseX, mouseY, pmouseX, pmouseY);

  if (mouseX != pmouseX || mouseY != pmouseY) {

    ink = (ink+dist(pmouseX,pmouseY,mouseX,mouseY))%256;

  } 

}

​

function drawReset() {

  strokeWeight(1);

  stroke(0);

  fill(255);

  rect(630,0, 70, 30);

  fill(0, 102, 153);

  text('Reset', 650, 20);

}

​

function clearBoard() {

  strokeWeight(1);

  fill(0);

  background(33);

  drawReset();

}

​

function mouseClicked() {

  if (mouseX >= 630 && mouseX <= 700 && mouseY >= 0 && mouseY <= 30) {

      clearBoard();

  }

}

​

let ink=0;

function draw() {

  if (mouseIsPressed) {

    paintRainbow();

  }

  drawReset();

}