Mi az a canvas elem az HTML5-ben?

A <canvas> elem HTML5-ben egy olyan tartály, amely grafikus rajzolásra szolgál szkriptek (általában JavaScript) segítségével. Lehetővé teszi dinamikus vizualizációk, játékok és animációk létrehozását közvetlenül a böngészőben pluginok nélkül.

Főbb jellemzők:

• Pixeles rajzolás: Pixelek szintjén működik, teljes kontrollt adva minden kép elem felett.
• API használat: A <canvas>-szal való interakció a renderelési API-n keresztül történik, leggyakrabban a 2d kontextus a kétdimenziós grafika számára. Létezik webgl 3D-hez is.
• Üres vászon: A <canvas> elem önmagában csak egy tartály. Minden rajzolás programozott módon történik.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

// A canvas elem elérése
const canvas = document.getElementById('myCanvas');

// A 2D rajz kontextus elérése
const ctx = canvas.getContext('2d');

// Egy téglalap rajzolása
ctx.fillStyle = "#FF0000"; // Kitöltő szín
ctx.fillRect(0, 0, 150, 75); // x, y, szélesség, magasság

A képességek közé tartozik:

• Alapvető formák (vonalak, téglalapok, körök, ívek)
• Szöveg
• Képek
• Átmenetek és minták
• Út (path) komplex alakzatokhoz