🔹 Canvas چیست؟

<canvas> یک تگ HTML است که برای رسم اشکال، متن، تصاویر و انیمیشن‌ها با استفاده از JavaScript استفاده می‌شود.
خود <canvas> فقط یک فضای خالی (container) است، اما با جاوااسکریپت می‌توان داخلش طراحی کرد.

🔹 سینتکس

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

• id : برای دسترسی از جاوااسکریپت

• width و height : اندازه بوم نقاشی

• style : مثل گذاشتن border برای نمایش محدوده

🔹 شروع کار با جاوااسکریپت

<script>
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d"); // گرفتن context دو بعدی
</script>

✏️ اشکال پایه‌ای در Canvas

1. رسم مستطیل

<script>
  ctx.fillStyle = "blue"; 
  ctx.fillRect(20, 20, 100, 50); // x , y , width , height
</script>

2. خط

<script>
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

3. دایره

<script>
  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 2 * Math.PI); // x,y,radius,start,end
  ctx.stroke();
</script>

4. متن

<script>
  ctx.font = "20px Arial";
  ctx.fillText("Hello Canvas", 50, 100);
</script>

5. تصویر

<script>
  let img = new Image();
  img.src = "myImage.png";
  img.onload = function() {
    ctx.drawImage(img, 10, 10, 150, 100);
  };
</script>

✅ جمع‌بندی

• <canvas> یک بوم نقاشی است.

• برای نقاشی باید از JavaScript و متدهای getContext("2d") استفاده کنیم.

• می‌توان اشکال، متن، تصاویر و حتی انیمیشن‌ها رسم کرد.