آموزش کن وس Rectangle در HTML

قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

  <canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>  ‎<button onclick="draw_square();return true;">Red Square</button>  <script>      function draw_square() {      ‎  var c1 = document.getElementById("c1");      ‎  var c1_context = c1.getContext("2d");      ‎  c1_context.fillStyle = "#f00";      ‎  c1_context.fillRect(50, 50, 100, 100);      ‎}  ‎</script>‎  

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

  var c1 = document.getElementById("c1");      var c1_context = c1.getContext("2d");‎  

از لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.

  c1_context.fillStyle = "#f00";   c1_context.fillRect(50, 50, 100, 100);‎  

جدول زیر روش های کشیدن مستطیل را نشان می دهد.

  <div>                      <canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>     ‎  <div>         ‎    <button onclick="blue_square_2();return true;">Blue Square</button>         ‎    <button onclick="red_stroke_2();return true;">Red Square</button>         ‎    <button onclick="clear_rect_2();return true;">Erase Everything</button>     </div>  </div>  <script>  ‎  var c2 = document.getElementById("c2");  ‎  var c2_context = c2.getContext("2d");  ‎  function blue_square_2() { //Blue color square  ‎    c2_context.fillStyle = "#00f";  ‎    c2_context.fillRect(50, 50, 100, 100);  ‎  }  ‎  function red_stroke_2() { //Red color edges  ‎    c2_context.strokeStyle = "#f00";  ‎    c2_context.strokeRect(45, 45, 110, 110);  ‎  }  ‎  function clear_rect_2() { //Clear all  ‎    c2_context.clearRect(40, 40, 120, 120);  ‎  }  ‎</script>‎