Beispiel: fillRect()

Mit fillRect() ein Rechteck in HTML Canvas zeichnen.

JavaScript Quelltext

function draw() {
    var canvas = document.getElementById('canvas');

    if(canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');

        if(ctx) {
            ctx.fillRect(50, 25, 100, 150); // x, y, w, h
        }
    }
}// draw()

window.onload = draw;

HTML Quelltext

<canvas id="canvas" width="200" height="200">
  <p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter
  <a href="http://de.wikipedia.org/wiki/Canvas_(HTML-Element)">HTML Canvas</a>-Unterstützung.</p>
</canvas>

<noscript>
  <p>Dieses Beispiel benötigt einen Webbrowser mit aktivierter
  <a href="http://de.wikipedia.org/wiki/JavaScript">JavaScript</a>-Unterstützung.</p>
</noscript>