HTML5 canvas

Canvas je HTML 5 element, který umožňuje dynamické skriptovatelné vykreslování bitmap a grafických primitiv, podobně jako známe například z VCL Delphi nebo C++.

Původně byl představen společností Apple pro použití v operačním systému Mac OS X pro WebKit komponenty, kterými jsou realizovány např. Dashboard widgety (miniaplikace rozmístitelné na pracovní ploše, znáte také z Windows Vista) nebo prohlížeč Safari. Později byl implementován do prohlížečů s jádrem Gecko (např. Mozilla Firefox), do prohlížeče Opera a také standardizován WHATWG pro nově navržené specifikace next-gen webových technologií.

Novell poskytuje XForms plugin pro Internet Explorer, který také poskytuje podporu pro Canvas. Je rovněž vyvíjeno nemalé nezávislé úsilí pro podporu canvas v IE, které nevyžaduje pluginy a funguje čistě na VML a JavaScriptu.

Canvas sestává z regionu, na který lze kreslit, definovaném v HTML kódu šířkou a výškou. Po zadefinování k němu lze přistupovat pomocí JavaScriptu za použití mnoha kreslících funkcí podobných jiným běžným 2D API. To umožňuje dynamicky generovat grafiku. Předpokládané využití (celé HTML 5 stále není schváleno jako standard) je v oblasti vykreslování grafů, animací, her (i 3D) a úpravy obrázků.

Příklad

Vykreslení dvou překrývajících se čtverců (jeden částečně průhledný).

<html>
  <head>
    <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      ctx.fillStyle = "rgb(200,0,0)";
      ctx.fillRect (10, 10, 55, 50);

      ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
      ctx.fillRect (30, 30, 55, 50);
    }
    </script>
  </head>
  <body onload="draw()">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>

Reference

Drawing Graphics with Canvas (příklady)
V tomto článku byl použit překlad textu z článku Canvas (HTML element) na anglické Wikipedii.