عنصر کانواس

کد زیر باعث ایجاد یک عنصر کانواس در یک صفحه اچ‌تی‌ام‌ال می‌شود:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

با استفاده از جاوا اسکریپت شما می‌توانید روی کانواس نقاشی کنید:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(30, 30, 50, 50);

این کد یک مستطیل قرمز را بر روی صفحه رسم می‌کند.

اس‌وی‌جی یک استاندارد قدیمی‌تر برای طراحی اشکال در مرورگرهای است. با این حال، برخلاف کانواس که از گرافیک شطرنجی استفاده می‌کند، SVG برداری است، به طوری که هر یک شکل کشیده شده به به عنوان یک شی در مدل شیءگرای سند نمایش داده می‌شود که در انتها به بیت‌مپ تبدیل می‌شود. این به این معنی است که اگر ویژگی‌های یک شی SVG تغییر کند، مرورگر می‌تواند به‌طور خودکار آن شی را دوباره تغیر دهد.

اما از سوی دیگر، اشیا کانواس در حالت فوری کشیده می‌شوند. در مثال کانواس بالا، یک‌بار مستطیل مدلی را رسم می‌کند که توسط سیستم کشیده شده‌است. اگر موقعیت آن تغییر کند، کل صحنه باید مجدداً ترسیم شود، از جمله هر شی که ممکن است توسط مستطی لپوشش داده شده‌باشد. اما در مورد SVG، می‌توان به سادگی ویژگیِ موقعیت مستطیل را تغییر داد و مرورگر مشخص می‌کند که چگونه آن را بازنمایی کند.

تصاویر اس‌وی‌جی در اکس‌ام‌ال نمایش داده می‌شوند، و صحنه‌های پیچیده را می‌توان با ابزارهای ویرایش اکس‌ام‌ال به وجود آورد.

SVG می‌توان از گردانندگان رویداد (event handlers) استفاده کند و به هر شی یک رویداد بافزاید و مثلاً یک مستطیل به رویداد onClick واکنش نشان دهد. اما در کانواس اینطور نیست و برای ایجاد یک رویداد onClick در آن، باید مختصات محل کلیک کردن موس را دریافت و آن را با مختصات مستطیل رسم شده مقایسه کرد تا مشخص کرد که آیا کلیک صورت گرفته یا خیر.

از نظر مفهومی، کانواس یک API سطح پایین‌تر است که برای مثالبا آن می‌توان یک موتورِ نمایشِ SVG ساخته شود.

این عنصر توسط نسخه‌های فعلی موزیلا فایرفاکس، گوگل کروم، اینترنت اکسپلورر، سفاری، اوپرا و مایکروسافت اج پشتیبانی می‌شود.

• Anti-Grain Geometry (AGG)
• کایرو (کتاب‌خانه گرافیک)
• Graphics Device Interface (GDI+)
• وب‌جی‌ال

• The canvas element, W3C, 2014-10-28, retrieved 2015-01-09
• HTML Canvas 2D Context, W3C, 2014-08-21, retrieved 2015-01-09
• بوم توضیحات در WHATWG برنامه‌های کاربردی وب پیش نویس مشخصات
• بوم مرجع صفحه در اپل توسعه دهندگان اتصال
• پایه بوم آموزش در Opera توسعه دهنده جامعه
• بوم آموزش مقدماتی و صفحه در Mozilla Developer center بایگانی‌شده در ۳ اوت ۲۰۱۲ توسط Wayback Machine