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.
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 }
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><canvas>-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>