عنصر کانواس

عنصر کانواس بخشی از HTML5 است که امکان ترسیم پویا و اسکریپتی اشکال ۲ بعدی و تصویرهای بیت‌مپی را فراهم می‌کند. این یک مدل سطح پایینِ رویه‌ای است که یک بیت‌مپ را به روز می‌کند. همچنین از طریق WebGL می‌توان اشکال سه‌بعدی و تصاویر را هم با آن ایجاد کرد.

نمونه[ویرایش]

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

<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، می‌توان به سادگی ویژگیِ موقعیت مستطیل را تغییر داد و مرورگر مشخص می‌کند که چگونه آن را بازنمایی کند.

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

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

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