用带有缩放图像的新画布替换旧画布

Question

我有一个上面有加载图像的画布。画布具有静态宽度和高度 (800x600)。图像可以更小或更大。如果图片小于画布大小，则使用以下代码将其放在中间

x = (canvas.width - image.width)/2;
y = (canvas.height - image.height) / 2;
ctx.drawImage(image, x, y)

我现在想用一个新的画布替换旧的画布，该画布的图像按比例缩放。我的代码如下（出于测试目的，我将图像渲染在画布的左上角，尚未实现确切位置）

oldCanvas = document.getElementById('myCanvas');
newCanvas = document.createElement('canvas');
ctx = newCanvas.getContext('2d');
x = y = 0;
newImageWidth = image.width * 2;
newImageHeight = image.height * 2;
ctx.drawImage(oldCanvas, x, y, newImageWidth, newImageHeight);
oldCanvas.parentNode.replaceChild(newCanvas, oldCanvas)

但画布与旧画布相同。我尝试在不缩放图像的情况下进行相同的操作，但更改了 newCanvas 的大小并成功了。我在这里做错了什么？

编辑：如果我更改 drawImage 以获取原始图像作为参数，它会起作用

ctx.drawImage(image, 0, 0, newImageWidth, newImageHeight);

但我想使用旧画布，因为图像可能会被编辑，例如更改亮度。在画布上使用画布元素而不是图像元素不一样吗？

EDIT2：为了符合堆栈的溢出策略，我在这里问：以image为参数调用drawImage和以canvas为参数调用drawImage有区别吗？

Answer 1

是的，您可以使用图像元素或现有画布作为 drawImage 的图像源。

您的问题是您使用的是可以剪辑而不是缩放的 drawImage 版本：

// this clips newImageWidth X newImageHeight pixels from oldCanvas at x,y 

ctx.drawImage(oldCanvas, x, y, newImageWidth, newImageHeight);

改为使用 drawImage 的缩放版本：

ctx.drawImage(oldCanvas,                    // use the old canvas as an image source
    0,0, oldCanvas.width,oldCanvas.height,  // use entire old canvas 
    x,y, newImageWidth, newImageHeight);    // scale that old canvas to the new size