createCanvas(600, 600);

}

​

function draw() {

  background(255);

  strokeWeight(1)

  stroke('lightgrey')

  for(var x=0;x<=600;x+=20)

  {

    line(x,0,x,600)

    line(0,x,600,x)

  }

  text("X: " + mouseX + " Y: " + mouseY, 100,20)

  //line info

  textStyle(BOLD);

  fill('black')

  textSize(12)

  text("(x1, y1)",45,50)

  text("(x2, y2)",100,85)

  //triangle info

  text("(x1, y1)",310,30)

  text("(x2, y2)",260,97)

  text("(x3, y3)",350,115)

  //rect info

  text("(x1, y1)",360,190)

  //quad info

  text("(x1, y1)",20,425)

  text("(x2, y2)",110,395)

  text("(x3, y3)",165,460)

  text("(x4, y4)",70,495)

  fill('white')

  stroke('white')

  rect(40,105,160,25) //line

  rect(240,135,240,25) //tri

  rect(30,310,240,25) //ellipse

  rect(330,310,240,25) //rect

  rect(30,510,290,25) //quad

  fill('#ed225d')

  textSize(16)

  text("line ( x1, y1, x2, y2 )",45,120)

  text("triangle ( x1, y1, x2, y2, x3, y3 )",245,150)

  text("ellipse ( x1, y1, width, height )",40,325)

  text("rect ( x1, y1, width, height )",340,325)

  text("quad ( x1, y1, x2, y2, x3, y3, x4, y4 )",40,530)

  //triangle info

  stroke('black')

  strokeWeight(5)

  //line

  point(60,60)

  point(120,100)

  //triangle

  point(320,40)

  point(280,80)

  point(360,100)

  //quad

  point(40,440)

  point(120,400)

  point(160,460)

  point(80,480)

  strokeWeight(1)

  //code for shapes

  line(60,60,120,100) 

  triangle(320,40,280,80,360,100)

  ellipse(100,240,100,80)

  rect(380,200,120,80)

  quad(40,440,120,400,160,460,80,480)

  angleMode(DEGREES)

  arc(440,460,150,100,180,360)  

  //ellipse point

  fill('black')

  textSize(12)

  textStyle(NORMAL);

  text("(x1, y1)",80,230)

  //text("|- - - - - width - - - -|",50,295)

  //text("_\n|\n|\nheight \n|\n|\n_",170,197)

  stroke('black')

  strokeWeight(5)

  point(100,240) //ellipse point

  point(380,200) //rect point

  point(440,460) //arc

  strokeWeight(0)

  text("start",340,460)

  text("stop",520,460)

  noStroke()

  fill('white')

  rect(339,473,300,50)

  fill('#ed225d')

  textSize(16)

  text("angleMode(DEGREES)",350,490)

  text("arc ( x, y, width, height, start, stop )",350,510)

}