Beispiel: translate()

Mit translate() den Ursprung in den unteren Bereich des Canvas verschieben und mit scale() die Koordinaten an der x-Achse spiegeln.

JavaScript Quelltext

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

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

        if(ctx) {
            // Ursprung in unteren Bereich des Canvas verschieben
            // und Koordinaten an der x-Achse spiegeln.
            ctx.translate(20, canvas.height - 30);
            ctx.scale(1, -1);

            ctx.fillRect(0, 0, 30, 120);
        }
    }
}// draw()

window.onload = draw;

HTML Quelltext

<canvas id="canvas" width="250" 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>