تگ canvas در html

تگ canvas یکی دیگر از تگ‌های html است که به شما اجازه می‌دهد تا با استفاده از جاوااسکریپت اشکال و طرح‌های گرافیکی ساده و پیچیده را در صفحات وب خود ایجاد کنید. مزیت استفاده از تگ <canvas> قابلیت اعمال تغییرات گسترده بر روی طرح‌های گرافیکی است.

برای استفاده از تگ canvas، شما باید ابتدا آن را در صفحه HTML خود ایجاد کنید و از طریق جاوااسکریپت طرح‌های گرافیکی خود را روی آن رسم کنید، همچنین متونی که درون تگ <canvas> فقط در صورتی نمایش داده می‌شوند که مرورگر از این تگ پشتیبانی نکند.

<canvas id="myCanvas">
Your browser does not support the canvas tag.
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>   
 

تگ <canvas> می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

height و width نیز از ویژگی‌های ضروری تگ <canvas> هستند، ویژگی height ارتفاع و ویژگی width عرض canvas را بر حسب پیکسل مشخص می کند.

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

تگ <canvas> از Global Attributes در HTML پشتیبانی می کند.

تگ <canvas> از Event Attributes in HTML در HTML پشتیبانی می کند.

اکثر مرورگرها تگ <canvas> را با مقادیر پیش فرض زیر نمایش می دهند:

canvas{
  display: inline;
}