在HTML5 Canvas上使用JavaScript

Question

我只是学习JavaScript，我刚刚发现如何在HTML5 Canvas上绘制可拖动的图像，但它只有一个图像。

所以，我想在HTML5 Canvas上绘制8幅图像可拖动，这是我的进步：

var canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
var isDragging=false;


$(function(){
var image1 = document.getElementById('btn');

image1.addEventListener('change', handleImage, false);

function handleImage(e){
    var reader = new FileReader();

    reader.onload = function(event){
        var img = new Image();

        img.onload = function(){
            context.drawImage(img,0,0,440,300);
        }   
        img.src = event.target.result;

        function handleMouseDown(e){
            canMouseX=parseInt(e.clientX-offsetX);
            canMouseY=parseInt(e.clientY-offsetY);
            // set the drag flag
            isDragging=true;
        }

        function handleMouseUp(e){
            canMouseX=parseInt(e.clientX-offsetX);
            canMouseY=parseInt(e.clientY-offsetY);
            // clear the drag flag
            isDragging=false;
        }

        function handleMouseOut(e){
            canMouseX=parseInt(e.clientX-offsetX);
            canMouseY=parseInt(e.clientY-offsetY);
            // user has left the canvas, so clear the drag flag
            //isDragging=false;
        }

        function handleMouseMove(e){
            canMouseX=parseInt(e.clientX-offsetX);
            canMouseY=parseInt(e.clientY-offsetY);
            // if the drag flag is set, clear the canvas and draw the image
            if(isDragging){
                context.clearRect(0,0,canvasWidth,canvasHeight);
                context.drawImage(img,canMouseX-128/2,canMouseY-120/2,440,300);
            }
        }

        $("#canvas").mousedown(function(e){handleMouseDown(e);});
        $("#canvas").mousemove(function(e){handleMouseMove(e);});
        $("#canvas").mouseup(function(e){handleMouseUp(e);});
        $("#canvas").mouseout(function(e){handleMouseOut(e);});

        }                       

        reader.readAsDataURL(e.target.files[0]);     
    }
});

这个代码只能用于一个图像，我想在一个画布上放8个图像，任何解决方案？请帮帮我...谢谢