CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
Nato
Nato

Reputation: 162

save image to canvas then draw more

im trying to save a image to the canvas then draw more. this is what i got soo far. it spits out both my image and drawing but deletes the image when i add text

-

draw the image

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

start text drawing 

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

start saving together

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

copiedImg.src = imageElem.src;


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

Upvotes: 0

Views: 61

Answers (1)

James Thorpe
James Thorpe

Reputation: 32212

I have a feeling it's this line:

tCtx.canvas.width = imageElem.width;

From here:

When you assign a value to the width or height poperties through JavaScript it has the side effect of resetting the canvas. So similarly to the clearRect function this means that the canvas is returned to transparency.

Upvotes: 2

Related Questions