Javascript 将图像保存到画布，然后绘制更多

我试图保存一个图像到画布上，然后再画更多。这就是我所得到的。它会吐出我的图像和图形，但在我添加文本时会删除图像

-

画图像

var  tCtx2 = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
var tCtx = document.getElementById('textCanvas').getContext('2d'),
imageElem = document.getElementById('image');
var ttyl = document.getElementById('newimg');
tCtx2.drawImage(ttyl,0,0);
imageElem.src = tCtx2.canvas.toDataURL("images/image.png");

开始文本绘制

document.getElementById('text').addEventListener('keyup', function (){

tCtx.globalCompositeOperation="source-over";
var mytxt = document.getElementById('text').value;
var mystr1 = mytxt.substr(0, 31);
var mystr2 = mytxt.substr(31, 31);
var mystr3 = mytxt.substr(62, 31);
var mystr4 = mytxt.substr(93, 31);
tCtx.canvas.width = imageElem.width; 
tCtx.fillStyle = '#000000';
tCtx.font = '17pt "Lucida Sans Unicode", "Lucida Grande", sans-serif';
tCtx.fillText(mystr1, 10, 98); 
tCtx.fillText(mystr2, 10, 122);
tCtx.fillText(mystr3, 10, 146);
tCtx.fillText(mystr4, 10, 168);

一起开始储蓄吧

var copiedImg = new Image();
copiedImg.onload = function(){
tCtx.drawImage(copiedImg, 0, 0);
};

copiedImg.src = imageElem.src;


imageElem.src = tCtx.canvas.toDataURL('image/png')
}, false);

---

我感觉是这样的：

tCtx.canvas.width = imageElem.width; 

发件人：

通过为宽度或高度权限指定值时 JavaScript它的副作用是重置画布。所以 与clearRect函数类似，这意味着画布是 恢复透明度

---

+我同意。调整画布元素的大小将清除画布内容。因此，北约要么在绘制图像之前将画布的大小调整移动到，要么在调整大小之后将图像的绘制移动到。