path: root/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html

---
title: Formen zeichnen mit Canvas
slug: Web/API/Canvas_API/Tutorial/Drawing_shapes
translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
original_slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen
---
<p>{{CanvasSidebar}}</p>

<h2 id="Koordinatensystem">Koordinatensystem</h2>

<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Bevor wir mit dem Zeichnen beginnen können, müssen wir über das <em>canvas grid</em> oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.</p>

<h2 id="Rechtecke_zeichnen">Rechtecke zeichnen</h2>

<p>Nicht wie in <a href="/en-US/docs/SVG" rel="internal" title="en/SVG">SVG</a>, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.</p>

<div id="section_3">
<p>Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:</p>

<dl>
 <dt><code>fillRect(<em>x</em>, <em>y</em>, <em>breite</em>, <em>höhe</em>)</code></dt>
 <dd>Zeichnet ein gefülltes Rechteck</dd>
 <dt><code>strokeRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt>
 <dd>Zeichnet den Rahmen eines Rechteckes</dd>
 <dt><code>clearRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt>
 <dd>Der Bereich des Rechteckes wird transparent</dd>
</dl>

<p>Alle drei Funktionen benötigen die selben drei Argumente. <code>x</code> und <code>y</code> beschreibt die Position (<em>siehe Koordinatensystem</em>). <code>breite</code> und <code>höhe</code> beschreiben die Größe des Rechteckes.</p>

<h3 id="Beispiel_mit_Rechtecken">Beispiel mit Rechtecken</h3>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  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);
  }
}</code></pre>

<p>Demo:</p>

<p>{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p>

<p>Die <code>fillRect()</code>-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die <code>clearRect()</code>-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die <code>strokeRect()</code>-Methode einen 50px großen schwarzen Rahmen in der Mitte.</p>

<p>Später werden wir zwei alternative Methoden für <code>clearRect()</code> behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.</p>

<p>Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.</p>

<h2 id="Pfade_zeichnen">Pfade zeichnen</h2>

<p>Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:</p>

<dl>
 <dt><code>beginPath()</code></dt>
 <dd>Erstellt einen Pfad und beendet ggf. einen älteren.</dd>
 <dt><code>closePath()</code></dt>
 <dd>Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.</dd>
 <dt><code>stroke()</code></dt>
 <dd>Zeichnet die Kontur des Pfades.</dd>
 <dt><code>fill()</code></dt>
 <dd>Zeichnet die Füllung des Pfades.</dd>
</dl>

<p>Zuerst wird also die <code>beginPath()</code>-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode <code>beginPath()</code> oder ein Aufruf der Methode <code>closePath()</code> löscht die Pfadanweisungen. Optional kann nun <code>closePath()</code> ausgeführt werden.</p>

<div class="note"><strong>Hinweis:</strong> Wenn <code>fill()</code> ausgeführt wird, wird automatisch der Pfad beendet, sodass <code>closePath()</code> nicht mehr ausgeführt werden muss. Da ist <strong>nicht</strong> der Fall wenn <code>stroke()</code> ausgeführt wird.</div>

<h3 id="Ein_Dreieck_zeichnen">Ein Dreieck zeichnen</h3>

<p>So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:</p>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
  }
}</code></pre>

<p>Demo:</p>

<p>{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}</p>

<h3 id="Stift_bewegen">Stift bewegen</h3>

<p>Eine sehr sinnvolle Methode ist <code>moveTo()</code>. Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.</p>

<dl>
 <dt><code>moveTo(<em>x</em>, <em>y</em>)</code></dt>
 <dd>Bewegt den Stift zu der Koordinate (x , y).</dd>
</dl>

<p>Meist wird direkt nach dem Aufruf von <code>beginPath()</code> <code>moveTo()</code> ausgeführt. Außerdem kann man <code>moveTo()</code> für nichtverbundene Pfade benutzen. Beispiel (<code>moveTo()</code>-Aufrufe sind rote Linien):</p>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
     var ctx = canvas.getContext('2d');

     ctx.beginPath();
     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
     ctx.moveTo(110, 75);
     ctx.arc(75, 75, 35, 0, Math.PI, false);    // Mund
     ctx.moveTo(65, 65);
     ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Linkes Auge
     ctx.moveTo(95, 65);
     ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Rechtes Auge
     ctx.stroke();
  }
}</code></pre>

<p>Demo:</p>

<p>{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p>

<div class="note">
<p><strong>Hinweis:</strong> <code>arc()</code> zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.</p>
</div>

<h3 id="Linien">Linien</h3>

<p>Für Linien verwendet man die <code>lineTo()</code>-Methode:</p>

<dl>
 <dt><code>lineTo(<em>x</em>, <em>y</em>)</code></dt>
 <dd>Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).</dd>
</dl>

<p>Diese Methode erwartet wie <code>moveTo()</code> zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.</p>

<p>Beispiel mit zwei Dreiecken:</p>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25, 25);
    ctx.lineTo(105, 25);
    ctx.lineTo(25, 105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    ctx.closePath();
    ctx.stroke();
  }
}</code></pre>

<p>Es beginnt mit der Ausführung von <code>beginPath()</code> um eine neue Form zu beginnen. Danach wird mit <code>moveTo()</code> der Startpunkt festgelegt. Danach werden die Linien gezeichnet.</p>

<p>{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p>

<h3 id="Kreisbögen">Kreisbögen</h3>

<p>Um Kreise oder Kreisbögen zu zeichnen, benutzt man die <code>arc()</code>-Methode.</p>

<dl>
 <dt><code>arc(<em>x</em>, <em>y</em>, <em>radius</em>, <em>startWinkel</em>, <em>endWinkel</em>, <em>uhrzeigersinn</em>)</code></dt>
 <dd>Zeichnet einen Kreisbogen.</dd>
</dl>

<p>Diese Methode benötigt sechs Parameter: <code>x</code> und <code>y</code> sind die Koordinaten des Mittelpunktes des Kreisbogens. <code>radius</code> ist der Radius des Kreisbogens. <code>startWinkel</code> und <code>endWinkel</code> definieren die Punkte auf dem Kreis in rad. Der <code>uhrzeigersinn</code>-Parameter ist <code>true</code>, wenn der Kreisbogen gegen den Uhrzeigersinn und <code>false</code> wenn er im Uhrzeigersinn gezeichnet werden soll.</p>

<div class="note">
<p><strong>Hinweis</strong>: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: <code>rad = (Math.PI / 180) * deg</code>.</p>
</div>
Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:<br>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    for (var i = 0; i &lt; 4; i++) {
      for (var j = 0; j &lt; 3; j++) {
        ctx.beginPath();
        var x = 25 + j * 50; // x coordinate
        var y = 25 + i * 50; // y coordinate
        var radius = 20; // Arc radius
        var startAngle = 0; // Starting point on circle
        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise

        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i &gt; 1) {
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}</code></pre>
{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

<h3 id="Bezier_und_quadratische_Kurven">Bezier und quadratische Kurven</h3>

<p><a class="external" href="http://de.wikipedia.org/wiki/B%C3%A9zierkurve" rel="external">Bézierkurven</a> sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.</p>

<dl>
 <dt><code>quadraticCurveTo(cp1x, cp1y, x, y)</code></dt>
 <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe des Kontrollpunktes mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>).</dd>
 <dt><code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code></dt>
 <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe der Kontrollpunkte mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>) und (<code>cp2x</code>, <code>cp2y</code>).</dd>
</dl>

<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.</p>

<p>Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.</p>

<h4 id="Quadratische_Bézierkurven">Quadratische Bézierkurven</h4>

<p>Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:</p>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Quadratric curves example
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
  }
}</code></pre>

<p>{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p>

<h4 id="Kubische_Bézierkurven">Kubische Bézierkurven</h4>

<p>Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.</p>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Cubic curves example
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.fill();
  }
}</code></pre>

<p>{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p>

<h3 id="Rechtecke">Rechtecke</h3>

<p>Es gibt auch eine Rechtecksmethode für Pfade:</p>

<dl>
 <dt><code>rect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt>
 <dd>Zeichnet ein Rechteck.</dd>
</dl>

<p>Nachdem diese Methode ausgeführt wurde, wird automatisch <code>moveTo(0, 0)</code> ausgeführt.</p>

<h3 id="Kombinationen">Kombinationen</h3>

<p>Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:</p>

<div class="hidden">
<pre class="brush: html">&lt;html&gt;
 &lt;body onload="draw();"&gt;
   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
</div>

<pre><code>function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    roundedRect(ctx, 12, 12, 150, 150, 15);
    roundedRect(ctx, 19, 19, 150, 150, 9);
    roundedRect(ctx, 53, 53, 49, 33, 10);
    roundedRect(ctx, 53, 119, 49, 16, 6);
    roundedRect(ctx, 135, 53, 49, 33, 10);
    roundedRect(ctx, 135, 119, 25, 49, 10);

    ctx.beginPath();
    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
    ctx.lineTo(31, 37);
    ctx.fill();

    for (var i = 0; i &lt; 8; i++) {
      ctx.fillRect(51 + i * 16, 35, 4, 4);
    }

    for (i = 0; i &lt; 6; i++) {
      ctx.fillRect(115, 51 + i * 16, 4, 4);
    }

    for (i = 0; i &lt; 8; i++) {
      ctx.fillRect(51 + i * 16, 99, 4, 4);
    }

    ctx.beginPath();
    ctx.moveTo(83, 116);
    ctx.lineTo(83, 102);
    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
    ctx.lineTo(111, 116);
    ctx.lineTo(106.333, 111.333);
    ctx.lineTo(101.666, 116);
    ctx.lineTo(97, 111.333);
    ctx.lineTo(92.333, 116);
    ctx.lineTo(87.666, 111.333);
    ctx.lineTo(83, 116);
    ctx.fill();

    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.moveTo(91, 96);
    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
    ctx.moveTo(103, 96);
    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
    ctx.fill();

    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
    ctx.fill();
  }
}

// A utility function to draw a rectangle with rounded corners.

function roundedRect(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x, y + radius);
  ctx.lineTo(x, y + height - radius);
  ctx.arcTo(x, y + height, x + radius, y + height, radius);
  ctx.lineTo(x + width - radius, y + height);
  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
  ctx.lineTo(x + width, y + radius);
  ctx.arcTo(x + width, y, x + width - radius, y, radius);
  ctx.lineTo(x + radius, y);
  ctx.arcTo(x, y, x, y + radius, radius);
  ctx.stroke();
}</code></pre>

<div id="section_18">
<p>Demo:</p>

<p>{{EmbedLiveSample("Kombinationen", 160, 160)}}</p>

<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}</p>
</div>
</div>