added-by-click rectangle dissapear in canvas fiddle html5

Question

I'm adding a rectangle by click inside of a canvas, to start writing a text...

PROBLEM

once I start writing the text the rectangle dissapear.I think the problem is that I dont pass any value of the new rectangle to the function....how would I solve this? or maybe activate a rectangle set by default once I click on add text

https://jsfiddle.net/xpvt214o/26337/

EXAMPLE edited to add the basic problem only.

 $("#Add").on("click", function() { $("#first_text").show(); $("#resetInput").show(); var rheight = 20; ctx.fillStyle = '#E1FFC7'; ctx.fillRect(20, rheight, 300, 50); }); var canvas = document.getElementById('cv'); ctx = canvas.getContext('2d'); // core drawing function var drawMe = function() { var img = document.getElementById('bg'); ctx.drawImage(img, 0, 0, 364, 662, 0, 0, 364, 662); ctx.fillStyle = '#E1FFC7'; text = $("#first_text").val(); ctx.fillStyle = 'black'; ctx.fillText(text, 20, 20) } $("#resetInput").on("click", function() { $("#first_text").val(""); drawMe(); }); $("#first_text").on("change keypress keyup keydown ", function() { drawMe(); }); drawMe(); 

 canvas { margin: 40px; } #first_text, #resetInput { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> <button id="Add">add text</button> <br/> <input type="text" id="first_text"> <button id="resetInput">reset</button> <br> <canvas id="cv"></canvas> <img id="bg" src="https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg" style="opacity:0;" /> 

Answer 1

Everytime you call drawMe from your keyboard input, you are drawing ontop of what is already there, thus drawing on top of the green box.

You need to add this after you set your color within the drawMe function:

ctx.fillRect(20, 20, 300, 50);

Here is a working example:

 $("#Add").on("click", function() { $("#first_text").show(); $("#resetInput").show(); var rheight = 20; ctx.fillStyle = '#E1FFC7'; ctx.fillRect(20, rheight, 300, 50); }); var canvas = document.getElementById('cv'); ctx = canvas.getContext('2d'); // core drawing function var drawMe = function() { var img = document.getElementById('bg'); ctx.drawImage(img, 0, 0, 364, 662, 0, 0, 364, 662); ctx.fillStyle = '#E1FFC7'; if ($('#first_text:visible').length > 0) { ctx.fillRect(20, 20, 300, 50); } text = $("#first_text").val(); ctx.fillStyle = 'black'; ctx.fillText(text, 20, 20) } $("#resetInput").on("click", function() { $("#first_text").val(""); drawMe(); }); $("#first_text").on("change keypress keyup keydown ", function() { drawMe(); }); drawMe(); 

 canvas { margin: 40px; } #first_text, #resetInput { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> <button id="Add">add text</button> <br/> <input type="text" id="first_text"> <button id="resetInput">reset</button> <br> <canvas id="cv"></canvas> <img id="bg" src="https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg" style="opacity:0;" />