---
title: '<canvas>: תגית ליצירת צורות דו מימדיות'
slug: Web/HTML/Element/canvas
translation_of: Web/HTML/Element/canvas
---
<div>{{HTMLRef}}</div>

<p dir="rtl">תגית <strong><code>&lt;canvas&gt;</code></strong> מאפשרת ליצור צורות דו מימדיות ולהטמיע אותן במסמך ה-HTML. <br>
 אלמנט זה יוצר אזור מלבני בו ניתן לצייר באמצעות קוד.</p>

<div> </div>

<table>
 <tbody>
  <tr>
   <th>קטגוריה</th>
   <td>סקריפטים והטמעת תכנים</td>
  </tr>
  <tr>
   <th>תגיות הורים מורשות</th>
   <td>&lt;abbr&gt;, &lt;audio&gt;, &lt;b&gt;, &lt;bdo&gt;, &lt;br&gt;, &lt;button&gt;, &lt;canvas&gt;, &lt;cite&gt;, &lt;code&gt;, &lt;command&gt;, &lt;data&gt;, &lt;datalist&gt;, &lt;dfn&gt;, &lt;em&gt;, &lt;embed&gt;, &lt;i&gt;, &lt;iframe&gt;, &lt;img&gt;, &lt;input&gt;, &lt;kbd&gt;, &lt;keygen&gt;, &lt;label&gt;, &lt;mark&gt;, &lt;math&gt;, &lt;meter&gt;, &lt;noscript&gt;, &lt;object&gt;, &lt;output&gt;, &lt;progress&gt;, &lt;q&gt;, &lt;ruby&gt;, &lt;samp&gt;, &lt;script&gt;, &lt;select&gt;, &lt;small&gt;, &lt;span&gt;, &lt;strong&gt;, &lt;sub&gt;, &lt;sup&gt;, &lt;svg&gt;, &lt;textarea&gt;, &lt;time&gt;, &lt;var&gt;, &lt;video&gt;, &lt;wbr&gt; <br>
     </td>
  </tr>
  <tr>
   <th scope="row">ממשק DOM</th>
   <td>{{domxref("HTMLCanvasElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="תארים">תארים</h2>

<p dir="rtl">תגית זו נכללת ברשימת <a href="https://developer.mozilla.org/he/docs/Web/HTML/%D7%AA%D7%90%D7%A8%D7%99%D7%9D_%D7%92%D7%9C%D7%95%D7%91%D7%9C%D7%99%D7%99%D7%9D">התארים הגלובליים</a>.</p>

<p dir="rtl">{{htmlattrdef("height")}} - תכונה להגדרת גובה.</p>

<p dir="rtl">{{htmlattrdef("width")}} - תכונה להגדרת רוחב.</p>

<dl>
 <dt dir="rtl">
 <h2 dir="rtl" id="דוגמא_-_כותרת_ופסקה">דוגמא - כותרת ופסקה</h2>

 <pre>&lt;canvas id="canvas" width="300" height="300"&gt;
  An alternative text describing what your canvas displays.
&lt;/canvas&gt;</pre>

 <h4 dir="rtl" id="דדגכ">דדגכ</h4>

 <pre>&lt;script&gt;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
&lt;/script&gt;</pre>
 </dt>
</dl>

<h2 dir="rtl" id="הערות">הערות</h2>

<p dir="rtl">* מומלץ להזין תוכן בין התגיות על מנת שזה יופיע במידה והדפדפן אינו תומך ב-Canvas.<br>
 * חובה להוסיף תג סגירה &lt;canvas/&gt;.<br>
  </p>

<h2 dir="rtl" id="ראה_גם">ראה גם</h2>

<ul>
 <li dir="rtl"><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">הקדמה ל-Canvas באתר Apple</a></li>
 <li dir="rtl"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">מדריך למשתמש ב-Canvas</a></li>
 <li dir="rtl"><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">ריכוז תגיות ותכונות של Canvas</a></li>
</ul>