在html5画布中将文本绘制为图像

我在一个HTML5项目中工作。我想画有边界的文字（如文字注释）。

首先，我画了一个矩形，并在鼠标移动中填充文本，如下所示：

context.strokeRect(x,y,w,h);
context.fillText('Enter youe text here',x,y);

但是当我开始绘制文本注释时，文本就完全绘制了。因此文本溢出到矩形边界之外。所以我想拍摄矩形部分的图像，然后我可以处理文本的溢出问题。我正在使用以下方式来做到这一点：-

 context.strokeRect(x,y,w,h);
 context.fillText('Enter youe text here',x,y);
 var imageData = context.getImageData(x,y,w,h);
 var data = imageData.data;
 context.putImageData(imageData, x,y);

通过这种方式，文本图像在成功创建，但现在我如何隐藏fillText（x，y，w，h）语句，并且我也在文本的帮助下在矩形中获取图像数据。

T提前存储大量