如何将拖放的图像绘制到画布上

<canvas id="myCanvas" width="500" height="400"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();

image.addEventListener('load', function() {
    // 当图像加载完成后，将其绘制到Canvas上
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
});

canvas.addEventListener('dragover', function(event) {
    // 阻止浏览器默认的拖放行为
    event.preventDefault();
});

canvas.addEventListener('drop', function(event) {
    // 阻止浏览器默认的拖放行为
    event.preventDefault();

    // 获取拖放的图像文件
    var file = event.dataTransfer.files[0];

    // 创建一个URL对象，用于加载图像
    var imageURL = URL.createObjectURL(file);

    // 加载图像
    image.src = imageURL;
});