Canvas — نقاشی با کد

Canvas چیست؟

<canvas> یک بوم نقاشی است که با جاوااسکریپت روی آن شکل می‌کشی. برای بازی، نمودار و گرافیک پویا عالی است.

<canvas id="c" width="300" height="150"></canvas>

const ctx = document.getElementById('c').getContext('2d');

// مستطیل
ctx.fillStyle = '#22d3ee';
ctx.fillRect(20, 20, 100, 80);

// دایره
ctx.beginPath();
ctx.arc(200, 70, 40, 0, Math.PI * 2);
ctx.fill();

• getContext('2d') ابزار ترسیم دوبعدی را می‌دهد.
• fillRect(x, y, w, h) مستطیل، arc() دایره.

Canvas پیکسلی است (مثل عکس)؛ برای گرافیک مقیاس‌پذیر، SVG بهتر است (درس بعد). در پلی‌گراند پایین، کد JS را تغییر بده و نتیجه را ببین!