Javascript 更改画布将删除图像

我以类似于t恤衫编辑器的方式使用HTML画布，允许用户定位和调整图像大小。将图像绘制到画布上，如下所示：

var img = new Image();
img.crossOrigin='anonymous';
img.onload = function () {
    var ratio = img.width / img.height;

    imageWidth = canvas.width;
    imageHeight = imageWidth / ratio;
    imageY = (canvas.height-imageHeight)/2;
    if (imageHeight > canvas.height) {
        imageHeight = canvas.height;
        imageWidth = imageHeight * ratio;
        imageY = 0;
    }

    imageRight = imageX + imageWidth;
    imageBottom = imageY + imageHeight
    draw(true, false);
}

function draw(withAnchors, withBorders) {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(img, 0, 0, img.width, img.height, imageX, imageY, imageWidth, imageHeight);

    if (withAnchors) {
        drawDragAnchor(imageX, imageY);
        drawDragAnchor(imageRight, imageY);
        drawDragAnchor(imageRight, imageBottom);
        drawDragAnchor(imageX, imageBottom);
    }

    if (withBorders) {
        ctx.beginPath();
        ctx.moveTo(imageX, imageY);
        ctx.lineTo(imageRight, imageY);
        ctx.lineTo(imageRight, imageBottom);
        ctx.lineTo(imageX, imageBottom);
        ctx.closePath();
        ctx.stroke();
    }

}

绘制到画布上的实际图像是在我的主index.PHP文件上使用PHP设置的，如下所示：

<script type="text/javascript"> img.src = <?php echo json_encode($image_url); ?>; </script>

我的问题是，每当我改变画布的大小时，画在画布上的图像就会消失。然而，每当我在画布上单击或移动时，它就会奇怪地重新出现。我想知道我做错了什么，以及如何解决这个问题

鼠标操作：

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

这是故意的。我的重点是：

当用户代理将位图尺寸设置为宽度和高度时， 它必须运行以下步骤：

[……]

将划痕位图调整为新的宽度和高度，并将其清除为完全透明的黑色。 画布更改大小后，必须重新绘制所有内容

您可能已经添加了触发重画的鼠标事件侦听器（尽管当前未显示）

---

使用draw函数重新绘制图像的代码：drawtrue、false

谢谢你的回答。我实际上有鼠标操作，但它们实际上允许重新定位和调整画布上绘制的图像的大小。我已经在上面的问题中添加了鼠标操作，但实际上我已经尝试在画布大小更改时重新绘制图像，但运气不佳？@AlexSaidani设置大小后，您是否尝试调用draw方法？在相同的操作中，就像您在onload handler中所做的一样，我尝试使用整个image.onload函数完全重新绘制图像，但运气不佳，但是仅使用我的主绘图函数，我就成功地使其工作：drawtrue，false；

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