Sample html5 canvas drawing

07 August 2011 brianbruff

 

So how hard is it to draw on a html5 canvas? Well if you ever lived in a GDI+ world like I once did, then it’s pretty simple. In fact it’s somewhat familiar to silverlight/wpf people too, the parameters passed to draw a rectangle for example are , left, top, width, height. (GDI/Windows API people would me more familiar to using left,top,right,bottom (the RECT struct). Nonetheless, IMO drawing with the html5 canvas couldn’t be easier.

image

 

Here’s the code

   1:  @{
   2:      ViewBag.Title = "Home Page";
   3:  }
   4:  <h2>@ViewBag.Message</h2>
   5:   
   6:  <canvas id="canvas" width="300" height="300">
   7:      Canvas not supported
   8:  </canvas>
   9:   
  10:   
  11:  @section Scripts
  12:  {
  13:      
  14:   
  15:      <script type="application/javascript">
  16:      
  17:          $(function() {
  18:              draw();
  19:          });
  20:      </script>
  21:   
  22:      <script type="application/javascript">
  23:          function draw() {
  24:              if (Modernizr.canvas ) {
  25:                  var canvas = document.getElementById("canvas");
  26:                  var ctx = canvas.getContext("2d");
  27:   
  28:                  ctx.fillStyle = "rgb(200,0,0)";
  29:                  ctx.fillRect(10, 10, 100, 1000);
  30:              }            
  31:          }
  32:      </script>
  33:  }

That’s all you need to get started, there are some nice libraries starting to emerge that use html5 canvas (graphing etc)