var newPoints = [];

var permPoints = [];

​

function setup() {

  createCanvas(400, 400);

  background(255);

  strokeWeight(5);

  stroke(0, 0, 0, 10);

  // Draw a border around the canvas

  rect(5, 5, width - 10, height - 10);

​

  // Create buttons for clearing the drawing and saving it as PNG

  clearButton = createButton('Clear Drawing');

  saveButton = createButton('Save As PNG');

  // undoButton = createButton('Undo');

​

  // Position buttons (uncomment to change positions)

  // clearButton.position(0, 0);

  // saveButton.position(100, 0);

  // undoButton.position(200, 0);

​

  // Attach event handlers to buttons

  clearButton.mousePressed(clearDrawing);

  saveButton.mousePressed(saveDrawing);

  // undoButton.mousePressed(undoStep);

}

​

function draw() {

  stroke(0);

  strokeWeight(10);

  noFill();

​

  // If the mouse is pressed, add the current mouse position to newPoints and permPoints

  if (start) {

    permPoints.push(createVector(mouseX, mouseY));

    newPoints.push(createVector(mouseX, mouseY));

  }

​

  // Draw the shape formed by newPoints

  beginShape();

  for (var i = 0; i < newPoints.length; i++) {

    var x = newPoints[i].x;

    var y = newPoints[i].y;

    vertex(x, y);

  }

  endShape();

}

​

function mousePressed() {

  start = true;

  newPoints = []; // Clear newPoints when the mouse is pressed

}

​

function mouseReleased() {

  console.log(permPoints); // Log the permanent points to the console

  start = false;

}

​

function clearDrawing() {

  clear();

  newPoints = [];

  permPoints = [];

  // Reset the background and redraw the border

  background(255);

  strokeWeight(5);

  stroke(0, 0, 0, 10);

  rect(5, 5, width - 10, height - 10);

}

​

function saveDrawing() {

  saveCanvas('emoji', 'png'); // Save the canvas as a PNG file

}

​

function undoStep() {

  for (var i = 0; i < newPoints.length; i++) {

    permPoints.pop();

  }

​

  clearDrawing();

​

  //   beginShape();

  //   for (i = 0; i < permPoints.length; i++) {

  //     var x = permPoints[i].x;

  //     var y = permPoints[i].y;

​

  //     vertex(x, y);

  //   }

  //   endShape();

}