Canvas

Canvas — HTML sahifada JavaScript orqali raster grafika chizish uchun ishlatiladigan element va API. <canvas> elementi o‘lchamga ega chizish yuzasini yaratadi, JavaScript esa uning context obyektidan foydalanib shakl, matn, rasm, animatsiya va pixel ma’lumotini boshqaradi.

Canvas immediate-mode modelga yaqin: chizilgan shakllar DOM elementi sifatida saqlanmaydi. Pixel yuzasi yangilanadi, lekin alohida circle yoki rectangle keyinchalik mustaqil obyekt sifatida mavjud bo‘lmaydi.

Canvas elementi

Oddiy element:

<canvas id="scene" width="800" height="450"></canvas>

width va height canvasning ichki bitmap o‘lchamini belgilaydi.

CSS width va height faqat ko‘rinish o‘lchamini o‘zgartirishi mumkin.

Ichki va CSS o‘lchami mos bo‘lmasa tasvir cho‘zilib yoki xira ko‘rinadi.

Rendering context

Chizish uchun context olinadi:

const canvas = document.querySelector("#scene");
const ctx = canvas.getContext("2d");

2d context ikki o‘lchamli grafika uchun.

Boshqa context turlari WebGL yoki WebGPUga oid bo‘lishi mumkin.

Bir canvas uchun context turi birinchi muvaffaqiyatli chaqiriqda belgilanadi.

Koordinata tizimi

Default koordinata bosh nuqtasi yuqori chap burchakda:

x → o‘ngga
y → pastga

Unit odatda canvas pixeliga mos.

Transform orqali koordinata tizimi ko‘chirilishi, aylantirilishi va masshtablanishi mumkin.

Rectangle

Rectangle chizish methodlari:

ctx.fillRect(10, 20, 100, 60);
ctx.strokeRect(10, 20, 100, 60);
ctx.clearRect(10, 20, 100, 60);

fillRect to‘ldiradi, strokeRect kontur chizadi, clearRect hududni tozalaydi.

Path

Murakkab shakl path orqali yaratiladi:

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.fill();

Path geometry’ni saqlaydi.

fill ichini, stroke chiziqlarni render qiladi.

Yangi shakl oldingi path bilan qo‘shilib ketmasligi uchun beginPath ishlatiladi.

Arc va egri chiziq

Circle va arc:

ctx.arc(x, y, radius, start, end);

Burchak radian bilan beriladi.

Bezier va quadratic curve methodlari smooth shakllar yaratadi.

Path control pointlar geometriyani belgilaydi.

Rang va style

Asosiy style propertylari:

fillStyle;
strokeStyle;
lineWidth;
lineCap;
lineJoin;
globalAlpha;
shadowga oid propertylar.

Qiymat rang, gradient yoki pattern bo‘lishi mumkin.

Gradient

Linear va radial gradient yaratiladi:

const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");

Gradient fill yoki stroke style sifatida ishlatiladi.

Color stop 0–1 oralig‘ida bo‘ladi.

Matn

Canvas matn chiza oladi:

ctx.font = "20px sans-serif";
ctx.fillText("UzbekDevs", 20, 40);

Text alignment, baseline va direction boshqariladi.

Canvas text DOM textiga o‘xshab select, wrap yoki screen reader uchun avtomatik semantic bermaydi.

Rasm

drawImage image, video, canvas yoki bitmapni chizadi.

source;
destination;
crop;
scale

variantlariga ega.

Rasm load tugamasdan chizilsa natija bo‘sh bo‘lishi mumkin.

Cross-origin rasm security qoidalariga ta’sir qiladi.

Tainted canvas

Cross-origin image CORS ruxsatisiz canvasga chizilsa canvas tainted bo‘lishi mumkin.

Chizish ko‘rinadi, ammo pixel o‘qish yoki export qilish bloklanadi.

Bu boshqa origin image data’sini script orqali o‘g‘irlashni cheklaydi.

Pixel ma’lumoti

getImageData pixel RGBA qiymatlarini qaytaradi.

putImageData pixel array’ni canvasga yozadi.

Pixel-level operation katta yuzada qimmat bo‘lishi mumkin.

Image processing uchun typed array va worker ishlatilishi mumkin.

Transform

Context transformlari:

translate;
rotate;
scale;
transform;
setTransform.

Transform keyingi chizish operationlariga ta’sir qiladi.

save va restore context state’ni stackda saqlashga yordam beradi.

Animatsiya

Animatsiya odatda:

requestAnimationFrame(draw);

orqali bajariladi.

Har frame’da scene tozalanib qayta chizilishi mumkin.

Browser display refreshiga mos schedule beradi.

Inactive tab’da animation throttling qilinishi ehtimoli bor.

Device pixel ratio

High-DPI ekranda CSS pixel va physical pixel farq qiladi.

Canvas ichki o‘lchami device pixel ratio bilan ko‘paytirilib, CSS o‘lchami saqlanishi mumkin.

Keyin context scale qilinadi.

Bu grafikaning xira ko‘rinishini kamaytiradi.

Event va hit testing

Canvas ichidagi shakllar DOM node emas.

Click qaysi obyektga tegishli ekanini application o‘zi aniqlaydi:

koordinata;
bounding box;
path;
color picking;
scene graph.

Accessibility va keyboard interaction ham alohida yaratiladi.

OffscreenCanvas

OffscreenCanvas chizish ishining bir qismini workerga ko‘chirish imkonini berishi mumkin.

Bu main thread yukini kamaytiradi.

Browser support va context turi tekshiriladi.

Result boshqa canvasga uzatilishi yoki bitmap sifatida ishlatilishi mumkin.

Canvas va SVG

Canvas raster va immediate-mode.

SVG vector va retained-mode DOM elementlardan iborat.

Canvas:

ko‘p obyektli tez animatsiya;
game;
pixel processing;
chart.

SVG:

scalable icon;
DOM event;
accessibility;
CSS bilan style

uchun qulay bo‘lishi mumkin.

Export

Canvas content:

canvas.toBlob(...)
canvas.toDataURL(...)

orqali image formatga export qilinishi mumkin. toBlob katta rasm uchun Base64 stringga qaraganda memory jihatdan qulayroq. Format, quality va browser support tekshiriladi. Tainted canvas exportni bloklaydi.

Resize

Canvas width yoki height atributi o‘zgartirilsa bitmap va context state odatda tozalanadi. Resize vaqtida transform, style va scene qayta tiklanadi. Responsive application o‘lchamni hisoblab, keyin barcha obyektlarni yana chizadi.

Bog‘liq tushunchalar

HTML Canvas, CanvasRenderingContext2D, Raster graphics, Path, Animation, requestAnimationFrame, ImageData, OffscreenCanvas, SVG, WebGL