const colorInput = document.getElementById('color');
const colorFill = document.getElementById('colorFill');
const weight = document.getElementById('weight');
const clear = document.getElementById('clear');
var inn = document.getElementById('inn');
const fontSize= document.getElementById('fontSize');

const paths = [];
let currentPath = [];

var line = false;
 
function setup() {
    var cnv = createCanvas(window.innerWidth, window.innerHeight);
    cnv.position(0,0)
    cnv.background(0,0,0,0);
    cnv.style('z-index','-10');
}

function draw() {


    fill(0,255,255)
    noFill(); //active to create only lines e co, deActive to create 'islands'
    
    
  if(mouseIsPressed){ 
      var point = {
        x: mouseX,
        y: mouseY,
        color: colorInput.value,
        weight: weight.value,
        inpu: inn.value,
        size: fontSize.value
      };
      currentPath.push(point);
    }

    paths.forEach(path => {  
      beginShape();

      path.forEach(point => {
              stroke(point.color); //always active
              strokeWeight(point.weight); //always active
          
              text(point.inpu ,point.x, point.y)
              textSize(point.size);
          
              rect(point.x, point.y, 3,3);
          
              ellipse(point.x, point.y, 3);
          
              vertex(point.x, point.y);
      });

        endShape();
  });
}

function mousePressed() {
  currentPath = [];
  paths.push(currentPath);
}

function inn(){
    message += key;
}