Rechtecke, die Grundfiguren

Grundbefehle zum Umgang mit Rechtecken

fillRect(x,y,width,height)  // Füllt einen rechteckigen Bereich
strokeRect(x,y,width,height)// Zeichnet einen rechteckigen Rahmen
clearRect(x,y,width,height) // Löscht einen rechteckigen Bereich, die Hintergrundfarbe wird sichtbar

Einfache Beispiele


function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
 
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

Ergebnis des 1. Beispiels

Zuerst wird ein schwarzes Quadrat gezeichnet, dann ein konzentrisches Quadrat mit "clearRect" ausgestanzt und hinterher noch ein Rahmen dorthinein gezeichnet.