在不重绘的情况下为现有画布添加更多空间？

Question

我创建了一幅画布，我已经在上面绘制了图像和文字。是否可以在当前画布中添加更多空间（在我的情况下为高度）而无需重绘所有内容？我想在已经绘制的项目下添加文本，但为了做到这一点，我必须为画布添加更多高度。

或者我可以反过来做 - 创建一个太大的画布开始，然后添加我的所有文本，最后裁剪画布（删除白色未使用的空间）？

Answer 1

您可以将画布放在具有固定目标高度的容器中。如果您将overflow设置为hidden，那么您可以控制可以看到多少。

更改画布的尺寸会使其清除，这样就无法使用。

Answer 2

我喜欢递归的想法，使用一个首先缩小的容器，然后展开以显示绘制文本所需的额外画布空间。

另一种调整画布大小的常用方法是将画布内容从临时画布上弹回。

// create a temp canvas (no need to add it to the DOM)
var tempCanvas=document.createElement('canvas');
var tempCtx=tempCanvas.getContext('2d');
tempCanvas.width=mainCanvas.width;
tempCanvas.height=mainCanvas.height;

// draw the main canvas to the temp canvas
tempCtx.drawImage(mainCanvas,0,0);

// resize the main canvas
mainCanvas.height+=30;

// restore the main canvas content by drawing the temp canvas
mainCtx.drawImage(tempCanvas,0,0);