Hello i have a sketching application i created but i need to able to allow the user to save the image they created from a web browser? I tried looking at save(); saveFrame(); createOutput(); but i dont think they can be used from a web browser im stuck and in need of a savior please help. Here is the code i have already.

Button redbut;
Button grnbut;
Button blubut;
Button eraserbut;
Button oranbut;
Button yelbut;
Button viobut;
Button strokeSize1;
Button strokeSize2;
Button strokeSize3;
Button strokeSize4;
Button strokeSize5;
Button eraseCanvas;

//Button savbut;

boolean mouseup=false;
int lineThickness;
int bColor=0;
void setup() {
  size(600,625);
  background(255);
 
  eraserbut= new Button(10,460,50,50,200,"b4");
  eraseCanvas= new Button(10,515,50,50,150,"Full Erase");
  redbut= new Button(70, 460, 75, 75, #FF0000, "rb1");
  grnbut= new Button(155, 460, 75, 75, #00FF00, "b2");
  blubut= new Button(240,460,75,75,#0000FF,"b3");
  oranbut= new Button(325,460,75,75,#FFBC00,"Orange");
  yelbut= new Button(410,460,75,75,#FEFF00,"Yellow");
  viobut= new Button(495,460,75,75,#F200FF,"Violet");
  strokeSize1= new Button(80,545,15,15,100,"5");
  strokeSize2= new Button(105,545,15,25,100,"10");
  strokeSize3= new Button(140,545,15,35,100,"15");
  strokeSize4= new Button(185,545,15,45,100,"Violet");
  strokeSize5= new Button(240,545,15,55,100,"Violet");
 
  //savbut= new Button(10,570,50,50,175,"SAVE ME");
 
  frameRate(60);
}
void draw() {
  noStroke();
  fill(0);
  rect(0,450,600,175);
 
  redbut.update();
  if (redbut.isClicked(mouseup)) {
    bColor=1;
    printMyLine("Red has been clicked"+ bColor);
  }
  grnbut.update();
  if (grnbut.isClicked(mouseup)) {
    bColor=2;
    printMyLine("Green has been clicked");
  }
    blubut.update();
  if (blubut.isClicked(mouseup)) {
    bColor=3;
    printMyLine("Blue has been clicked");
  }
  eraserbut.update();
  if (eraserbut.isClicked(mouseup)) {
    bColor=4;
    printMyLine("eraser button has been clicked");
  }
  eraseCanvas.update();
  if (eraseCanvas.isClicked(mouseup)) {
    background(255);
    printMyLine("erase has been clicked");
  }
   oranbut.update();
  if (oranbut.isClicked(mouseup)) {
    bColor=5;
    printMyLine("b2 has been clicked");
  }
    yelbut.update();
  if (yelbut.isClicked(mouseup)) {
    bColor=6;
    printMyLine("b2 has been clicked");
  }
    viobut.update();
  if (viobut.isClicked(mouseup)) {
    bColor=7;
    printMyLine("b2 has been clicked");
  }
  strokeSize1.update();
  if (strokeSize1.isClicked(mouseup)) {
    lineThickness=1;
    printMyLine("sroke 5 has been clicked");
  }
  strokeSize2.update();
  if (strokeSize2.isClicked(mouseup)) {
    lineThickness=5;
    printMyLine("stroke 10 has been clicked");
  }
  strokeSize3.update();
  if (strokeSize3.isClicked(mouseup)) {
    lineThickness=10;
    printMyLine("stroke 15 has been clicked");
  }
    strokeSize4.update();
  if (strokeSize4.isClicked(mouseup)) {
    lineThickness=15;
    printMyLine("stroke 15 has been clicked");
  }
    strokeSize5.update();
  if (strokeSize5.isClicked(mouseup)) {
    lineThickness=20;
    printMyLine("stroke 15 has been clicked");
  }
  /*
  savbut.update();
  if (savbut.isClicked(mouseup)) {
    save("test.jpeg");
    printMyLine("save  has been clicked");
  }*/
 
 
  //color stroke section-------------
  strokeWeight(lineThickness);
  //RED
  if (mousePressed && bColor==1) {
    stroke(255,0,0);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  //GREEN
    if (mousePressed && bColor==2) {
    stroke(0,255,0);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  //BLUE
  if (mousePressed && bColor==3) {
    stroke(0,0,255);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  //ERASER
  if (mousePressed && bColor==4) {
    fill(255);
    noStroke();
    ellipse(mouseX,mouseY,20,20);
  }
  //ORANGE
   if (mousePressed && bColor==5) {
    stroke(#FFBC00);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  //YELLOW
   if (mousePressed && bColor==6) {
    stroke(#FEFF00);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  //VIOLET
  if (mousePressed && bColor==7) {
    stroke(#F200FF);
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
  mouseup = false;
}
void mouseReleased() {
  mouseup=true;
}

void printMyLine(String lineToPrint) {
  println(lineToPrint);
}

class Button {
  float xpos, ypos, wid, hig;
  int val,orgVal;
  boolean over = false;
  boolean pressed = false;
  String btnName;
 

  Button(float x, float y, float h, float w, int col, String name) {
    xpos=x;
    ypos=y;
    wid=w;
    hig=h;
    val=col;
    orgVal=col;
    btnName=name;
  }
  void over() {
    if (mouseX>=xpos && mouseX<=xpos+wid && mouseY>=ypos && mouseY<=ypos+hig)
    {
      over=true;
    }
    else {
      over=false;
    }
  }
  void pressed() {
    if (over && mousePressed) {
      pressed = true;
    }
    else {
      pressed = false;
    }
  }

  void update() {
    over();
    pressed();
    //this is where you would change colors for the over and down states
    if (pressed) {
      val=100;
    }
    else {
      val=orgVal;
    }
    noStroke();
    fill(255);
    rect(xpos-2, ypos+2, wid, hig);
    fill(val);
    rect(xpos,ypos,wid,hig);
  }

  boolean isClicked(boolean go){
    if(go && over){
      return true;
    }else{
      return false;
    }
  }
}