Dokumentation (canvas.quaese.de)

Allgemeines - Grundgerüst

Grundlage bildet ein canvas-Element im Dokument. Wird dieses über eine ID referenziert, wird davon ausgegangen, dass es ein ID-Attribut mit dem Wert canvas_id besitzt.

Überprüfung auf Unterstützung

Bevor mit den canvas-Schnittstellen gearbeitet werden kann, sollte eine Überprüfung stattfinden, ob das Objekt überhaupt untstützt wird. Hierfür wird die Method getContext verwendet.

var objCanvas = document.getElementById('canvas_id');
// Überprüfung
if(objCanvas.getContext){
  var objContext = objCanvas.getContext('2d');
  // Zeichenroutinen
}else{
  // Sonstiger Code
}

Grundgerüst

Der nachstehende Quellcode zeigt ein Grundgerüst, wie mit der <canvas>-Schnittstelle gearbeitet werden kann. In den Beispielen und Codefragementen dieser Dokumentation wird - falls nicht anders angekündigt - von dieser Struktur ausgegangen.

<html>
  <head>
    <title>&lt;canvas&gt;-Dokumentation</title>
    <script type="text/javascript">
      function zeichnen(){
        var objCanvas = document.getElementById('canvas_id');
        if (objCanvas.getContext){
          var objContext = objCanvas.getContext('2d');
          // Zeichenroutinen
        }else{
          // Sonstige Routinen
        }
      }

      window.onload = function(){
        zeichnen();
      }
    </script>
    <style type="text/css">
      canvas{ border: 1px solid #000;}
    </style>
  </head>
  <body>
    <canvas width="300" height="300" id="canvas_id"></canvas>
  </body>
</html>