آشنایی با عنصر canvas

canvas: یه بوم خالی برای رسم مستقیم تو مرورگر

تا اینجای این فصل، همه‌چیز درباره‌ی نمایش فایل‌های رسانه‌ای آماده (صدا و ویدیو) بود. حالا می‌رسیم به یه قابلیت کاملاً متفاوت: تگ canvas، که به‌جای نمایش یه فایل از پیش آماده، یه فضای خالی برای «نقاشی‌کردن» مستقیم با کد فراهم می‌کنه؛ چیزی که تو درس ۱-۲ به‌عنوان یکی از انقلاب‌های HTML5 بهش اشاره کردیم.

canvas چیه؟

<canvas id="myCanvas" width="400" height="200"></canvas>

تگ canvas یه مستطیل خالی و بدون هیچ محتوای اولیه‌ای رو تو صفحه ایجاد می‌کنه که می‌شه روش خط، شکل، متن، یا حتی تصویر رسم کرد. اما نکته‌ی خیلی مهم اینه که خودِ HTML به‌تنهایی هیچ راهی برای رسم چیزی روی canvas نداره؛ این تگ فقط یه «بوم خالی» ایجاد می‌کنه، و رسم واقعی روش همیشه با جاوااسکریپت انجام می‌شه.

ویژگی‌های width و height

ویژگی‌های width و height ابعاد بوم رو بر حسب پیکسل مشخص می‌کنن؛ اگه ننویسیشون، مقدار پیش‌فرض ۳۰۰ در ۱۵۰ پیکسل در نظر گرفته می‌شه. برخلاف img که width/height رو می‌شه با CSS هم تغییر داد بدون اینکه کیفیت واقعی محتوا خراب بشه، تو canvas بهتره این ابعاد رو مستقیم با ویژگی HTML مشخص کنی، چون تغییر بعدیش با CSS می‌تونه باعث کشیده یا فشرده شدن محتوای رسم‌شده بشه.

چرا خود HTML نمی‌تونه چیزی رو روی canvas رسم کنه؟

این نکته‌ی مهمیه که خیلی از تازه‌کارها باهاش گیج می‌شن: canvas فقط یه ظرف خالیه، دقیقاً مثل یه بوم واقعی نقاشی که خودش هیچ نقاشی‌ای روش نیست. برای اینکه واقعاً چیزی روش رسم بشه (یه خط، یه دایره، یه نمودار)، حتماً باید از جاوااسکریپت و یه API مخصوص به اسم Canvas API استفاده کرد. این یعنی محتوای canvas بدون جاوااسکریپت، همیشه یه مستطیل خالیه.

یه مثال ساده از رسم با جاوااسکریپت

<canvas id="myCanvas" width="400" height="200"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(50, 50, 150, 100);
</script>

بیا این کد رو خط به خط ببینیم: اول یه canvas خالی با id="myCanvas" ساختیم. بعد تو جاوااسکریپت، اون canvas رو پیدا کردیم و یه «کانتکست رسم دوبعدی» (getContext("2d")) ازش گرفتیم؛ این کانتکست، ابزاریه که همه‌ی دستورات رسم رو در اختیارمون می‌ذاره. بعد با fillStyle رنگ آبی رو انتخاب کردیم، و با fillRect یه مستطیل پر رنگ‌شده (از نقطه‌ی ۵۰،۵۰ با عرض ۱۵۰ و ارتفاع ۱۰۰) رسم کردیم. نتیجه: یه مستطیل آبی داخل بوم canvas.

جزئیات کامل جاوااسکریپت و Canvas API خارج از محدوده‌ی این دوره‌ی HTML5 است و در دوره‌های مربوط به جاوااسکریپت به‌طور کامل پوشش داده می‌شود؛ همین‌جا فقط هدفمون آشنایی با نقش HTML در این ماجراست.

canvas برای چه کارهایی استفاده می‌شه؟

• رسم نمودارها و گراف‌های داده (مثل نمودار فروش یا آمار)
• ساخت بازی‌های ساده‌ی دوبعدی
• ویرایش تصویر مستقیم تو مرورگر (مثل فیلترهای عکس)
• انیمیشن‌های سفارشی که با کد کنترل می‌شن
• رسم امضای دیجیتال (مثل چیزی که تو فرم‌های آنلاین برای امضا با موس یا انگشت می‌بینی)

محتوای جایگزین (Fallback Content)

<canvas id="myCanvas" width="400" height="200">
  مرورگر شما از canvas پشتیبانی نمی‌کند.
</canvas>

درست مثل audio و video، تگ canvas هم یه تگ باز و بسته‌ست و می‌تونه محتوای جایگزین داشته باشه؛ این متن فقط تو مرورگرهای خیلی قدیمی که اصلاً canvas رو نمی‌شناسن نمایش داده می‌شه.

یه محدودیت مهم: محتوای canvas برای صفحه‌خوان‌ها ناشناخته‌ست

یه نکته‌ی حیاتی درباره‌ی دسترسی‌پذیری اینجا وجود داره: هر چیزی که با جاوااسکریپت روی canvas رسم بشه (یه نمودار، یه شکل، حتی متن)، از دید صفحه‌خوان فقط یه مجموعه‌ای از پیکسل‌های بی‌معنیه؛ برخلاف متن HTML واقعی یا حتی img با alt، صفحه‌خوان هیچ راهی برای «فهمیدن» محتوای رسم‌شده روی canvas نداره، مگر اینکه توسعه‌دهنده به‌طور جداگانه (با تکنیک‌های پیشرفته‌تر ARIA) اطلاعات معادلی رو براش فراهم کنه.

یه مثال کامل با محتوای جایگزین معنادار

<h2>نمودار فروش سه‌ماهه</h2>

<canvas id="salesChart" width="500" height="300">
  نمودار میله‌ای فروش سه‌ماهه: فروردین ۱۲۰ میلیون، اردیبهشت ۱۵۰ میلیون، خرداد ۱۸۰ میلیون تومان.
</canvas>

<script>
  // کد جاوااسکریپت برای رسم نمودار
</script>

تو این مثال، محتوای جایگزین یه توضیح متنی کامل از داده‌های نموداره؛ این کار هم برای مرورگرهای بدون پشتیبانی از canvas، هم برای صفحه‌خوان‌هایی که نمی‌تونن محتوای بصری رسم‌شده رو تفسیر کنن، مفیده.

چند اشتباه رایج

• انتظار داشتن که خود HTML بتونه چیزی رو مستقیم روی canvas نمایش بده، بدون نیاز به جاوااسکریپت.
• تغییر ابعاد canvas فقط با CSS (به‌جای ویژگی‌های width/height در HTML)، که باعث کشیدگی یا فشردگی نامطلوب محتوا می‌شه.
• بی‌توجهی به مشکل دسترسی‌پذیری canvas و ننوشتن هیچ محتوای جایگزین معناداری.

بهترین روش‌ها

• همیشه ابعاد canvas رو با ویژگی‌های width و height مستقیم تو HTML مشخص کن، نه فقط با CSS.
• برای محتوای مهم (مثل نمودارهای داده‌ای)، همیشه یه توضیح متنی جایگزین معنادار داخل canvas بنویس.
• برای محتوایی که نیاز به دسترسی‌پذیری واقعی داره (نه صرفاً تزئینی)، به گزینه‌های جایگزین مثل SVG (که تو درس بعد می‌بینیم) هم فکر کن.

نکته‌ی سئو

گوگل نمی‌تواند محتوای رسم‌شده روی canvas را مستقیماً تحلیل کند؛ به همین دلیل، ارائه‌ی محتوای جایگزین متنی داخل canvas یا کنار آن (مثلاً یک جدول داده مشابه) برای حفظ قابلیت ایندکس‌شدن اطلاعات مهم است.

نکته‌ی دسترسی‌پذیری

محتوای رسم‌شده روی canvas به‌طور پیش‌فرض برای صفحه‌خوان‌ها کاملاً نامفهوم است؛ ارائه‌ی محتوای جایگزین گویا داخل تگ canvas (بین تگ باز و بسته) تنها راه ساده برای انتقال معنای این محتوا به کاربران صفحه‌خوان است.

جمع‌بندی

تگ canvas یک بوم خالی برای رسم گرافیکی ایجاد می‌کند که محتوای واقعی آن همیشه با جاوااسکریپت (از طریق Canvas API) ترسیم می‌شود؛ خود HTML به‌تنهایی هیچ محتوایی روی آن رسم نمی‌کند. به دلیل محدودیت‌های دسترسی‌پذیری این تگ، ارائه‌ی محتوای جایگزین متنی و گویا برای اطلاعات مهم ضروری است.