列表内的HTML5 Canvas，无法在所有画布上绘制图像

Question

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.

<_ul id="ulDirectory" data-role="listview" data-filter="true">
<li data-role="fieldcontain" style="background: #dddddd; height: 80px">
            <div class="ui-grid-a">
                <div class="ui-block-a" style="width: 25%">
                    <canvas id="myCanvas<%: Html.DisplayFor(_m => item.EmployeeCode) %>" width="80" height="80" class="pull-left"></canvas>
                </div>
                <div class="ui-block-b" style="width: 75%; line-height: 25px">
                    <span><%: Html.DisplayFor(_m => item.FName) %>  <%: Html.DisplayFor(_m => item.LName) %></span><br />
                    <span><%: Html.DisplayFor(_m => item.Mobile) %> | <%: Html.DisplayFor(_m => item.EmployeeCode) %></span><br />
                    <span><%: Html.DisplayFor(_m => item.Email) %></span>
                </div>
            </div>
        </li>
</_ul>

<script type="text/javascript">
function displayImage() {`enter code here`
            $("ul#ulDirectory > 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();
        });
</script>

Answer 1

All your variables belong to a global scope and are getting overriden in each itteration. Use var keyword to declare the variables inside the each function scope.

$("ul#ulDirectory > li canvas").each(function () {
    var canvas = this;
    if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        var myImage = new Image();
        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 = ...

Here is a fiddle: http://jsfiddle.net/4Lozwkzq/1/