<canvas> - HTML5 elementer

HTML5 elementer, forklaring og eksempler - <canvas>

Definer et område hvor der kan tegnes bitmap grafik for eksempel med JavaScript.

Til at starte med er <canvas> gennemsigtigt så man kan ikke se det før man tegne noget.
Men man kan give det en ramme med CSS så det er let at se hvor canvaset er.

The canvas element represents a resolution-dependent bitmap canvas, which can be used for dynamically rendering of images such as game graphics, graphs, or other images.
Kilde : w3.org

Browserunderstøttelse fra caniuse.com :


Her ses hvordan <canvas> elementet bruges.

Alt hvad der skal tegnes på <canvas> sker fra for eksempel JavaScript.

Her laves et <canvas> som er 400 pixels bredt og 300 pixels højt.

Da <canvas> er gennemsigtigt kan man ikke se det før der er tegnet noget.
Derfor kan man eventuelt lave en ramme med CSS omkring canvaset så det er let at se hvor det er.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode
Siden er sidst opdateret mandag 25. juni 2018