A canvas HTML-elem a HTML5 része, mely lehetővé teszi 2 dimenziós alakzatok dinamikus, szkriptelhető renderelését. Egy felbontásfüggő bitmapes "vásznat" biztosít, melyre alakzatok és képek rajzolhatók, majd megjeleníthetők. Használatához szükséges a szkriptelés engedélyezése, anélkül tartalom nem jelenik meg rajta Az elem része a "WhatWG Web applications 1.0" specifikációnak. A HTML5-ben jelent meg.
A canvast eredetileg az Apple vezette be a saját Mac OS X WebKit komponensükben, 2004-ben, amely a Mac OS X Dashboard widget-jeiben és a Safari webböngészőben is megtalálható. Később, 2005-ben a Gecko is adaptálta a canvast, majd az Opera 2006-ban, és standardizálta a Web Hypertext Application Technology Working Group (WHATWG).
A HTML5 specifikációja alapján a canvas egy jövőbeli verziója lehetséges, hogy definiálni fog egy 3D-s rajzolást.
A canvas egy, a HTML-ben height (magasság) és width (szélesség) attribútumokkal definiált rajzolható régió. Ezt elérheti egy JavaScript kód egy rajzoló API-n és annak funkcióin keresztül, melyek hasonlóak az egyéb 2D rajzoló API-k funkcióihoz, ezáltal megadván a lehetőséget a dinamikus rajzolásra. A canvas néhány használata lehet a grafikonok, animációk, játékok létrehozása.
Az alábbi kód létrehoz egy canvas elemet az oldalon:
<canvas id="pelda" width="200" height="200">
Ez a szöveg akkor jelenik meg a böngészőben, amennyiben az nem támogatja a canvas-t.
</canvas>
A JavaScript segítségével lehet rajzolni a canvas-ra:
var example = document.getElementById('pelda');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);
A kód egy piros téglalapot rajzol a képernyőre.
A canvas a width vagy a height attribútum átállításával (akár ugyanakkorára állításával) állítható vissza eredeti állapotába.
A SVG egy korábbi standard a böngészőkben való képrajzolásra. Mindazonáltal, a raszteralapú canvas-szal ellentétben az SVG vektoralapú, azaz minden rajzolt elem egy színtérgráfban vagy a DOM-ban tárolódik, mely ezután egy bitmap-be renderelődik. Ez azt jelenti, hogy ha az SVG objektum attribútumai megváltoznak, azokat a böngésző újrarenderelheti.
Ez előbbi canvas példában, amikor a téglalap megrajzolódik, a rajzolás tényét a rendszer mintegy "elfelejti". Ha a pozíció megváltoztatására lenne szükség, az egészet újra kell renderelni, beleértve a téglalap által esetlegesen lefedett objektumokat is. De ennek a példának SVG-be való átültetésekor könnyedén változtatható a téglalap attribútuma és a böngésző meg tudná határozni, hogyan kell újrarajzolni. Vannak JavaScript-könyvtárak, melyek a színtérgráf lehetőségét adják a canvas-hoz. Továbbá lehetséges a canvas-t rétegenként megrajzolni és csak a rétegeket újrarajzolni.
Az SVG-képeket egy XML-alapú fájl reprezentálja és a komplex képeket XML-szerkesztőkkel lehet szerkeszteni vagy létrehozni.
Az SVG színtérgráf engedélyezi az eseménykezelők létrehozását az objektumokhoz asszociálva, így tehát egy négyzet válaszolhat egy onClick eseményre. Ugyanezen funkcionalitás canvas-szal való létrehozásához az egérkattintás koordinátáinak a téglalap koordinátáival való összeegyeztetése szükséges.
Fogalmilag a canvas egy alacsonyabb szintű API, ami alapján egy motor, mely például az SVG-t is támogatja építhető. Vannak JavaScript-könyvtárak, amelyek részleges SVG-támogatást nyújtanak azon böngészőkhöz, melyek nem támogatják az SVG-t, ám támogatják a canvas-t. Mindazonáltal általánosan nem ez az eset—külön standardot jelentenek. A helyzet bonyolult, mivel van némi színtérgráf támogatás a canvas-hoz és az SVG is rendelkezik némi bitmap-manipulációs képességgel.
A canvas elem a bevezetésekor változó fogadtatásban részesült a webes szabványok közösségétől. Voltak érvek az Apple azon döntése körül, miszerint egy új HTML elemet hoz létre, ahelyett, hogy támogatná a már meglevő SVG standardot. Voltak továbbá a szintaxis körül is problémák, így például a névtér hiánya.
2007. március 14-én a WebKit-et fejlesztő Dave Hyatt továbbított egy e-mailt az Apple-től, amely kijelentette, hogy az Apple fenntart minden szellemi tulajdonnal kapcsolatos jogot a WHATWG’s Web Applications 1.0 Working Draft-jával kapcsolatban, amely 2005. március 24-ére lett dátumozva, a 10.01-es szekcióban, “Graphics: The bitmap canvas” címmel, de nyitva hagyta az ajtót a szabadalmak licencelésére, továbbá azok egy, szabadalom-irányelvvel rendelkező kezelőszervezethez való továbbítására. Ez a webfejlesztők körében jelentékeny megbeszélést okozott és kérdéseket vetett fel a WHATWG's szabadalom-irányelvének hiánya miatt, ellentétben a World Wide Web Consortium (W3C) jogdíjmentes licencpolitikájával. Az Apple végül a szabadalmakat a W3C jogdíjmentes szabadalom-licencével adta ki. Ez annyit jelent, hogy az Apple-nek kötelező jogdíjmentes licencelést biztosítania a szabadalomra amikor a canvas HTML-elem része lesz a HTML munkacsoport által létrehozott W3C-ajánlásnak.
Ezt a HTML-elemet támogatja jelenleg a Mozilla Firefox, a Google Chrome, az Internet Explorer, a Safari, a Konqueror és az Opera jelenlegi verziója. Az Internet Explorer korábbi (8-as vagy alacsonyabb verziószámú) változatai nem támogatják a canvas-t, mindazonáltal elérhetők Google és Mozilla által készített kiegészítők.
Egy részletes áttekintés a canvas HTML-elem támogatásáról a legnépszerűbb böngészők körében (a piaci arány adatai a StatCounter-ből származnak):
| Internet Explorer | Firefox | Safari (desktop) | Chrome | Opera (desktop) | Safari (mobil) | Opera (mobil) | Android Browser |
|---|---|---|---|---|---|---|---|
| 6.0 | 2.0 - 6.0 | 3.1 - 3.2 | 4.0 - 13.0 | 9.0 - 11.0 | 3.2 | 10.0 | 2.0 |
| 7.0 | 7.0 | 4.0 | 14.0 | 11.1 | 4.0 | 11.0 | 2.1 |
| 8.0 | 8.0 | 5.0 | 15.0 | 11.5 | 4.2 - 4.3 | 11.1 | 2.3,3.0 |
| 9.0 | 9.0 | 5.1 | 16.0 | 11.6 | 5.0 | 11.5 | 4.0 |
| 28,87% | 22,97% | 6,37% | 29,15% | 1,59% | 2,31% | 2,21% | 2,13% |
{{cite web}}: CS1 karbantartás: elavult archiválási szolgáltatás (link)Ez a szócikk részben vagy egészben a canvas element című angol Wikipédia-szócikk fordításán alapul. Az eredeti cikk szerkesztőit annak laptörténete sorolja fel. Ez a jelzés csupán a megfogalmazás eredetét és a szerzői jogokat jelzi, nem szolgál a cikkben szereplő információk forrásmegjelöléseként.
