let greenSlider;

let blueSlider;

let strokeSlider;

let r, g, b, stro;

let cnvat; //____________________________________ HTML positioning

let layer;

let off = 130;

let menu = false;

​

function setup() {

  createCanvas(800, 400).parent('canvasposition');

  layer = createGraphics(800 - off, 400);

  background(255);

  tools_over_canvas();

}

​

function tools_over_canvas() {

  check_pos();

  redSlider = createSlider(0, 255, 50).parent('canvasposition');

  redSlider.position(7, cnvat.y + 20);

  redSlider.size(100, 20);

  greenSlider = createSlider(0, 255, 50).parent('canvasposition');

  greenSlider.position(7, cnvat.y + 55);

  greenSlider.size(100, 20);

  blueSlider = createSlider(0, 255, 50).parent('canvasposition');

  blueSlider.position(7, cnvat.y + 90);

  blueSlider.size(100, 20);

  strokeSlider = createSlider(1, 20, 1).parent('canvasposition');

  strokeSlider.position(7, cnvat.y + 125);

  strokeSlider.size(100, 20);

}

​

function tools_text() { //__ from draw() ( without sliders )

  push();

  fill(150);

  noStroke();

  rect(0, 0, off, height);

  noStroke();

  fill(200, 0, 0);

  text("RED", 5, 20);

  fill(0, 200, 0);

  text("GREEN", 5, 55);

  fill(0, 0, 200);

  text("BLUE", 5, 90);

  fill(0, 50, 0);

  text("STROKE", 5, 125);

  // show color bar

  fill(r, g, b);

  rect(20, 150, 80, stro);

  fill(120);

  // more button

  let xb = 20, yb = 360, wb = 80, hb = 30;

  if (over(xb, yb, wb, hb)) {

    stroke(0, 200, 200);

    if (mouseIsPressed) menu = true;

  }

  if ( menu ) {  //__ add menu area

    push();

    fill(0, 0, 80);

    noStroke();

    rect(off, 0, 100, 100);

    let xx = off+80, yx = 3, wx = 20, hx = 20;

    fill(0,200,0);

    rect(xx,yx,wx,hx);

    stroke(0);

    noFill();

    text('x',xx+5,yx+15);

    if ( over(xx, yx, wx, hx) && mouseIsPressed ) {

      background(255);

      menu = false;  //__ close menu area

    }

    pop();

  }

  rect(xb, yb, wb, hb);

  fill(0);

  noStroke();

  text('More +', 40, 380);

​

  pop();

}

​

function draw() {

  r = redSlider.value();

  g = greenSlider.value();

  b = blueSlider.value();

  stro = strokeSlider.value();

​

  layer.stroke(r, g, b);

  layer.strokeWeight(stro);

  if (mouseIsPressed && ! menu ) {

    layer.line(mouseX - off, mouseY, pmouseX - off, pmouseY);

  }

  image(layer, off, 0);

  tools_text();

}

​

​

function check_pos() {

  cnvat = _renderer.position();

  //print("canvas at : x "+cnvat.x+" y "+cnvat.y);

}

​

function keyPressed() {

  if (key == 'c') clean();

  if (key == 's') layer.save("snap.png");

}

​

function clean() {

  print("clean"); // layer.clear();  // not work like with canvas

  push();

  fill(255);

  noStroke();

  layer.rect(0, 0, 800 - off, 400);

  pop();

}

​

function over(x, y, w, h) {

  return (mouseX > x & mouseX < x + w & mouseY > y & mouseY < y + h);

}