Canvasrendering: hoe je browser grafiek pixel voor pixel tekent
Als je weleens een online tekentool hebt gebruikt, een spelletje in je browser hebt gespeeld of een interactieve grafiek op een nieuwssite hebt zien bewegen, dan heb je hoogstwaarschijnlijk canvasrendering in actie gezien. Het is de techniek waarmee webpagina's zelf grafiek kunnen tekenen, in plaats van alleen kant-en-klare plaatjes te tonen. Denk aan het verschil tussen een ingelijste foto aan de muur en een leeg canvasdoek waarop iemand ter plekke een schilderij maakt: bij canvasrendering krijgt de browser een leeg "doek" en de instructies om er, regel voor regel, iets op te tekenen.
Die instructies komen van programmeercode, meestal in de taal JavaScript, die in de browser draait terwijl jij naar de pagina kijkt. Daardoor kan wat er op het scherm verschijnt voortdurend veranderen: lijnen die bewegen, vormen die groeien, spelfiguren die rondrennen. Canvasrendering is dus geen los stuk techniek met een eigen naam die je ergens hoort vallen, maar een basisonderdeel van hoe moderne, interactieve webpagina's werken.
Wat is het precies?
De kern van canvasrendering is het <canvas>-element: een bouwsteen van HTML, de opmaaktaal waarin webpagina's zijn geschreven. Waar een gewone <img>-tag een bestaand plaatje toont, is <canvas> in feite een leeg rechthoekig gebied op de pagina zonder enige inhoud. Pas als er JavaScript-code op wordt losgelaten, gebeurt er iets.
Die code communiceert met het canvas via een zogeheten rendering context: een verzameling functies om lijnen, vormen, tekst en afbeeldingen te tekenen, kleuren te mengen en pixels rechtstreeks te manipuleren. De meestgebruikte variant heet de 2D-context en is bedoeld voor platte grafiek: grafieken, tekeningen, eenvoudige spellen, animaties.
Voor complexere, driedimensionale grafiek bestaat een tweede soort context: WebGL. Dit geeft JavaScript-code toegang tot de grafische kaart (GPU) van de computer, dezelfde hardware die ook computerspellen tekent. WebGL is gebaseerd op OpenGL ES, een grafische standaard die van oudsher vooral in mobiele apparaten en spelconsoles wordt gebruikt. Met WebGL kunnen browsers 3D-modellen, kaarten en zware visuele effecten tekenen zonder dat je een aparte app hoeft te installeren.
Belangrijk om te begrijpen: canvasrendering werkt met pixels, niet met objecten. Zodra een vorm getekend is, "weet" de browser niet meer dat het een cirkel of een lijn was; het is gewoon een verzameling gekleurde beeldpunten geworden. Wil je die cirkel later verplaatsen, dan moet de programmeur het hele canvas opnieuw laten tekenen. Dat is fundamenteel anders dan bijvoorbeeld SVG, een andere webtechniek voor grafiek, waarbij vormen wél als aparte, aanpasbare objecten in de pagina blijven bestaan.
Wat wil men ermee bereiken?
Het doel van canvasrendering is simpel geformuleerd: webpagina's de mogelijkheid geven om willekeurige, dynamische grafiek te tonen zonder dat daarvoor een los programma nodig is. Vóór deze techniek moesten ontwikkelaars terugvallen op plug-ins zoals Adobe Flash of Java-applets om iets interactiefs op een pagina te tonen. Die plug-ins waren zwaar, traag te laden en berucht om beveiligingslekken.
Door tekenmogelijkheden rechtstreeks in de browser in te bouwen, kunnen ontwikkelaars grafische toepassingen bouwen die direct werken, op elk apparaat met een moderne browser, zonder extra installatie. Dat opent de deur voor browsergames, datavisualisaties, tekentools, fotobewerkers en simulaties die volledig in de webpagina zelf draaien.
Een tweede, minder zichtbare doelstelling is prestatie: canvas-tekenoperaties zijn geoptimaliseerd om snel te zijn, zodat animaties soepel ogen. Met WebGL komt daar de wens bij om ook zware 3D-toepassingen — van architectuurvisualisaties tot wetenschappelijke simulaties — toegankelijk te maken voor iedereen met een browser, in plaats van alleen voor mensen die specialistische software installeren.
Voorbeelden uit de praktijk
Canvasrendering zit inmiddels in tal van bekende webtoepassingen verwerkt:
- Figma, het populaire ontwerpprogramma voor interfaces, tekent zijn hele werkgebied met WebGL-rendering rechtstreeks in de browser, waardoor duizenden vormen tegelijk soepel te verslepen zijn.
- Photopea is een gratis, in de browser draaiende fotobewerker die qua uiterlijk sterk op Adobe Photoshop lijkt en canvas gebruikt om lagen, penseelstreken en filters te tekenen.
- Chart.js en vergelijkbare grafiekbibliotheken gebruiken canvas om interactieve staafdiagrammen, lijngrafieken en taartdiagrammen te tekenen op nieuwssites en dashboards, inclusief op sites die actuele cijfers presenteren.
- Eenvoudige browsergames zoals Slither.io en agar.io tekenen hun hele speelveld, inclusief bewegende spelers, met canvas-animaties die tientallen keren per seconde worden ververst.
- Kaartendiensten zoals Google Maps gebruiken WebGL-rendering om vectorkaarten — kaarten die uit lijnen en vlakken bestaan in plaats van uit vooraf getekende plaatjes — vloeiend te kunnen draaien en kantelen.
Hoe ver is de techniek?
Canvasrendering is geen opkomende technologie meer, maar een volwassen, breed gedragen webstandaard. Het <canvas>-element werd begin jaren 2000 door Apple geïntroduceerd voor kleine bureaubladtoepassingen (widgets) in Mac OS X en de Safari-browser, en werd daarna overgenomen door de WHATWG, de organisatie die de HTML-standaard beheert. Sindsdien is het onderdeel van elke moderne browser: Chrome, Firefox, Safari, Edge en vrijwel alle mobiele browsers ondersteunen zowel de 2D-context als WebGL.
De belangrijkste ontwikkeling van de afgelopen jaren is niet het canvas-element zelf, maar wat eromheen gebeurt. WebGL kreeg een opvolger, WebGPU, een nieuwere standaard die moderne grafische kaarten efficiënter aanspreekt en die stap voor stap in browsers wordt uitgerold. Verder blijven browserbouwers de rekenkracht optimaliseren, onder meer door tekenwerk waar mogelijk aan de GPU over te laten in plaats van aan de processor.
Een blijvend punt van zorg is canvas fingerprinting: omdat een canvas-tekening op subtiele wijze net iets anders wordt weergegeven afhankelijk van je grafische kaart, besturingssysteem en lettertypen, kan een website die verschillen gebruiken als een soort vingerafdruk om bezoekers te herkennen, ook zonder cookies. Onderzoekers documenteerden dit gebruik bij duizenden van de meest bezochte websites. Browsers proberen dit tegen te gaan met waarschuwingen en extra toestemmingseisen, maar het blijft een kat-en-muisspel tussen trackingtechnieken en privacybescherming.
Wie werken eraan?
Omdat canvas een webstandaard is, wordt de ontwikkeling niet door één bedrijf bepaald, maar door een samenwerking van browserbouwers binnen standaardisatieorganisaties. De WHATWG (met daarin onder meer Apple, Google, Mozilla en Microsoft) onderhoudt de HTML-specificatie waar canvas deel van uitmaakt. Voor de 3D-kant is de Khronos Group verantwoordelijk, een samenwerkingsverband van grafische-hardwarebedrijven en softwarebouwers dat zowel WebGL als de nieuwere WebGPU-standaard ontwikkelt.
Op het niveau van de browsers zelf zijn het vooral Google (Chrome, met de Blink-engine), Mozilla (Firefox, Gecko-engine) en Apple (Safari, WebKit-engine) die de daadwerkelijke implementatie bouwen en optimaliseren. Microsoft draagt via zijn Edge-browser, die tegenwoordig op Chromium is gebaseerd, eveneens bij aan de ontwikkeling rond canvas en WebGPU. Daarnaast zijn universitaire onderzoeksgroepen, onder meer in de Verenigde Staten en Europa, actief betrokken bij onderzoek naar de privacyrisico's van canvas-technieken zoals fingerprinting.