FAQ: Canvas (Leinwand)

Wie lege ich ein Canvas Element auf einer HTML-Seite an?

<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #000000;"></canvas>

legt die folgende Leinwand mit einer Höhe von Breite von 200 Pixeln und einer Höhe
von 100 Pixeln an und versieht sie mit einem Rahmen.


    

Wie kann ich über JavaScript beispielsweise zwei farbige Rechtecke auf die Leinwand zeichnen?

<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #000000;"></canvas>

<script>
  // Zeichenfunktion
  function draw() {
    var canvas = document.getElementById("myCanvas2");
    if(canvas.getContext){
      var ctx = canvas.getContext("2d");

      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect(10, 10, 55, 50);

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect(30, 30, 55, 50);
    }
  }
  // Aufruf der Zeichenfunktion
  draw();
</script>


  
    

Wie zeichne ich ein 2D-Koordinatensystem auf die Leinwand? Nach Aufruf der folgenden Musterlösung können Sie wie gewohnt die Quelltexte (html, css und js) über "rechte Maustaste + Seitenquelltext anzeigen" begutachten. Sie gelangen zuerst in den HTML-Quelltext und finden dort auch die Verweise auf die eingebundenen CSS- und JavaScript Dateien, die Sie dort nur anklicken müssen. Musterlösung für das Zeichnen eines 2D-Koordinatensystem auf ein Canvas

Wie zeichne ich beispielsweise die Funktion f(x) = x3 - 2 x2 + 1 auf das 2D-Koordinatensystem? Nach Aufruf der folgenden Musterlösung können Sie wie gewohnt die Quelltexte (html, css und js) über "rechte Maustaste + Seitenquelltext anzeigen" begutachten. Sie gelangen zuerst in den HTML-Quelltext und finden dort auch die Verweise auf die eingebundenen CSS- und JavaScript Dateien, die Sie dort nur anklicken müssen. Musterlösung für das Zeichnen der Funktion f(x) = x3 - 2 x2 + 1 auf das 2D-Koordinatensystem

Wie kann ich mit der Maus auf der Leinwand zeichnen? Nach Aufruf der folgenden Musterlösung können Sie wie gewohnt die Quelltexte (html, css und js) über "rechte Maustaste + Seitenquelltext anzeigen" begutachten. Sie gelangen zuerst in den HTML-Quelltext und finden dort auch die Verweise auf die eingebundenen CSS- und JavaScript Dateien, die Sie dort nur anklicken müssen. Musterlösung für das Zeichnen mit der Maus auf der Leinwand