عنصر کانواس بخشی از 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 میتوان از گردانندگان رویداد (event handlers) استفاده کند و به هر شی یک رویداد بافزاید و مثلاً یک مستطیل به رویداد onClick
واکنش نشان دهد. اما در کانواس اینطور نیست و برای ایجاد یک رویداد onClick
در آن، باید مختصات محل کلیک کردن موس را دریافت و آن را با مختصات مستطیل رسم شده مقایسه کرد تا مشخص کرد که آیا کلیک صورت گرفته یا خیر.
از نظر مفهومی، کانواس یک API سطح پایینتر است که برای مثالبا آن میتوان یک موتورِ نمایشِ SVG ساخته شود.
این عنصر توسط نسخههای فعلی موزیلا فایرفاکس، گوگل کروم، اینترنت اکسپلورر، سفاری، اوپرا[۱] و مایکروسافت اج پشتیبانی میشود.[۲]
canvas
element, W3C, 2014-10-28, retrieved 2015-01-09