title: HTML5 Canvas inside list, cannot draw images on all
body: <p>I am trying to draw images on HTML5 Canvas inside unordered list. There is 1 canvas inside each li element and there are total of 20 li inside ul. I am using below code to draw image on canvas, however only the last canvas gets image drawn on it. I am new to HTML5 not really sure what I am doing wrong, but I am doing something wrong for sure.</p>
  
  <pre><code>&lt;_ul id="ulDirectory" data-role="listview" data-filter="true"&gt;
  &lt;li data-role="fieldcontain" style="background: #dddddd; height: 80px"&gt;
              &lt;div class="ui-grid-a"&gt;
                  &lt;div class="ui-block-a" style="width: 25%"&gt;
                      &lt;canvas id="myCanvas&lt;%: Html.DisplayFor(_m =&gt; item.EmployeeCode) %&gt;" width="80" height="80" class="pull-left"&gt;&lt;/canvas&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b" style="width: 75%; line-height: 25px"&gt;
                      &lt;span&gt;&lt;%: Html.DisplayFor(_m =&gt; item.FName) %&gt;  &lt;%: Html.DisplayFor(_m =&gt; item.LName) %&gt;&lt;/span&gt;&lt;br /&gt;
                      &lt;span&gt;&lt;%: Html.DisplayFor(_m =&gt; item.Mobile) %&gt; | &lt;%: Html.DisplayFor(_m =&gt; item.EmployeeCode) %&gt;&lt;/span&gt;&lt;br /&gt;
                      &lt;span&gt;&lt;%: Html.DisplayFor(_m =&gt; item.Email) %&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/li&gt;
  &lt;/_ul&gt;
  
  &lt;script type="text/javascript"&gt;
  function displayImage() {`enter code here`
              $("ul#ulDirectory &gt; li").find("canvas").each(function () {
                  var myImage = new Image(); //**UPDATE**
                  canvas = this;
                  if (canvas.getContext) {
                      ctx = canvas.getContext("2d");
                      myImage.onload = function () {
                          ctx.drawImage(myImage, 0, 0, 80, 80);
                          ctx.strokeStyle = "white";
                          ctx.lineWidth = "25";
                          ctx.beginPath();
                          ctx.arc(40, 40, 52, 0, Math.PI * 2, true);
                          ctx.closePath();
                          ctx.strokeStyle = '#dddddd';
                          ctx.stroke();
                      }
                      myImage.src = "../../TempUpload/hitin831121.png";
                  }
              });
  $(document).ready(function () {
              displayImage();
          });
  &lt;/script&gt;
  </code></pre>