JavaScript generiert zufällige Grafiken durch Klicken

<Stil>
  *{
   Rand: 0;
   Polsterung: 0;
  }
  #Leinwand{
   Rand: durchgehend 1 Pixel rot;
   Anzeige: Block;
   Rand: 0 automatisch;
  }
  #Vater{
   Breite: 200px;
   Rand: 0 automatisch;
   
  }
  #btn{
   Rand rechts: 40px;
   Cursor: Zeiger;
  }
  #cle{
   Cursor: Zeiger;
  }
</Stil>

<Text>
 <Leinwand-ID="Leinwand" Breite="600" Höhe="600"></Leinwand>
 <div id="Vater">
  <input type="button" id="btn" value="Klicken zum Generieren">
  <input type="button" id="cle" value="Zum Löschen klicken">
 </div>
</body>

var Leinwand = document.getElementById("Leinwand");
 var Kontext = Canvas.getContext("2d");
 var btn = document.getElementById("btn");
 var cle = document.getElementById("cle");

Funktion Farbe(){
  var r = Math.floor(Math.random()*255);
  var g = Math.floor(Math.random()*255);
  var b = Math.floor(Math.random()*255);
  var a=Math.random();
  var bg="rgba("+r+","+g+","+b+","+a+")";
  Rückkehr bg;
 }

btn.onclick=Funktion(){
  var random = Math.floor(Math.random()*3+1);
  wenn(random==1){
   var rectr=Math.floor(Math.random()*2);
   var rectx = Math.floor(Math.random()*600);
   var recty=Math.floor(Math.random()*600);
   var Rechteckbreite = Math.floor (Math.random()*200+200);
   var rectheight=Math.floor(Math.random()*200+200);
   wenn(rectr== 0){
    Kontext.beginPath();
    Kontext.StrokeStyle=Farbe();
    Kontext.StrokeRect(Rechteckx,Rechtecky,Rechteckbreite,Rechteckhöhe)
    Kontext.Pfad schließen();
   }
   anders {
    Kontext.beginPath();
    Kontext.Füllstil=Farbe();
    Kontext.fillRect(Rechteckx,Rechtecky,Rechteckbreite,Rechteckhöhe);
    Kontext.Pfad schließen();
   }
  }
  sonst wenn(random == 2){
   var arcr = Math.floor(Math.random()*2);
   var arcx=Math.floor(Math.random()*600);
   var arcy=Math.floor(Math.random()*600);
   var arcr = Math.floor(Math.random()*300);
   wenn(arcr==0){
    Kontext.beginPath();
    Kontext.StrokeStyle=Farbe();
    Kontext.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    Kontext.Strich();
    Kontext.Pfad schließen();
   }
  
   anders{
    Kontext.beginPath();
    Kontext.Füllstil=Farbe();
    Kontext.arc(arcx,arcy,arcr,0,2*Math.PI,false);
    Kontext.Füllen();
    Kontext.Pfad schließen();
   }
  }
  sonst wenn(random==3){
   var movex = Math.floor(Math.random()*600);
   var movey=Math.floor(Math.random()*600);
   var linex = Math.floor(Math.random()*600);
   var liney = Math.floor(Math.random()*600);
   var linew = Math.floor(Math.random()*20);
   Kontext.beginPath();
   Kontext.StrokeStyle=Farbe();
   Kontext.moveTo(movex,movey);
   Kontext.lineTo(linex,liney);
   Kontext.Zeilenbreite=Zeilenbreite;
   Kontext.Strich();
   Kontext.Pfad schließen();
  }
}

cle.onclick=Funktion(){
  Kontext.beginPath();
  Kontext.clearRect(0,0,600,600);
  Kontext.Pfad schließen();
 }