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

Question

我试图将图像保存到画布然后绘制更多。这就是我到目前为止所得到的。它会吐出我的图像和绘图，但在我添加文本时会删除图像

-

绘制图像

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);

Answer 1

我有一种感觉是这条线：

tCtx.canvas.width = imageElem.width; 

来自here：

当您通过以下方式为宽度或高度属性赋值时 JavaScript 它具有重置画布的副作用。所以 类似于 clearRect 函数，这意味着画布是 恢复透明。