How can I have two input texts with two canvases

Question

In my code I have two canvases where I can input text. When I write text, it fits into the canvas (the font-size is decreasing) and also I can change the color and font-family.

So when I write into the first input text it appears on the first canvas. But when I try to write on the second input text it doesn't show up on the second canvas (if I press the blue button for changing the color, only then shows up). Here is the JSFiddle code: https://jsfiddle.net/noytmwu7/24/ .I would really appreciate your help!

 var canvas4 = document.getElementById("canvas4"); var ctx4 = canvas4.getContext("2d"); var clubNameFontFamily = "Arial Black"; var clubNameFontSize = "20px"; var clubNameFontStyle = "bold"; var clubNameFontColor = "#000000"; $('#clubNameTag').bind('change keyup input', redrawTextsCan4); $('#clubNameLine1').bind('click', redrawTextsCan4); function redrawTextsCan4() { ctx4.clearRect(0, 0, canvas4.width, canvas4.height); ctx4.textAlign = "center"; ctx4.fillStyle = clubNameFontColor; clubNameFontSize = fitClubNameOnCanvas(ctx4, $('#clubNameLine1').val().toUpperCase(), clubNameFontFamily); ctx4.font = clubNameFontStyle + " " + clubNameFontSize + "px " + clubNameFontFamily; ctx4.fillText($('#clubNameLine1').val().toUpperCase(), canvas4.width * 0.5, 30); } function fitClubNameOnCanvas(ctx, text, fontface) { var size = clubNameMeasureTextBinMethod(ctx, text, fontface, 0, 80, canvas4.width); if (size > 18) return 18; return size; } function clubNameMeasureTextBinMethod(ctx, text, fontface, min, max, desiredWidth) { if (max - min < 1) { return min; } var test = min + ((max - min) / 2); //Find half interval ctx.font = test + "px " + fontface; measureTest = ctx.measureText(text).width; if (measureTest > desiredWidth) { var found = clubNameMeasureTextBinMethod(ctx, text, fontface, min, test, desiredWidth) } else { var found = clubNameMeasureTextBinMethod(ctx, text, fontface, test, max, desiredWidth) } return found; } function clubNameColor(v4) { v4 = v4.dataset.id; switch (v4) { case "littleblue": clubNameFontColor = "#33ccff"; break; case "orange": clubNameFontColor = "#ff9900"; break; } redrawTextsCan4(); } function changeClubNameFontFamily(v5) { switch (v5) { case "franklin": clubNameFontFamily = "Franklin Gothic"; break; case "impact": clubNameFontFamily = "Impact"; break; } redrawTextsCan4(); } //the second one var canvas11 = document.getElementById("canvas11"); var ctx11 = canvas11.getContext("2d"); var selectedTextFont = "Arial Black"; var selectedFontSize1 = "20px"; var selectedFontStyle = "bold"; var selectedFontColor = "#000000"; var selectedFontSize2 = "20px"; $('#nametag2').bind('change keyup input', redrawTextsCan11); $('#line4').bind('click', redrawTextsCan11); function redrawTextsCan11() { ctx11.clearRect(0, 0, canvas11.width, canvas11.height); ctx11.textAlign = "center"; ctx11.fillStyle = selectedFontColor; selectedFontSize1 = fitTextOnCanvas(ctx11, $('#line4').val().toUpperCase(), selectedTextFont); ctx11.font = selectedFontStyle + " " + selectedFontSize1 + "px " + selectedTextFont; ctx11.fillText($('#line4').val().toUpperCase(), canvas11.width * 0.5, 30); } function fitTextOnCanvas(ctx, text, fontface) { var size = measureTextBinaryMethod(ctx, text, fontface, 0, 80, canvas11.width); if (size > 18) return 18; return size; } function measureTextBinaryMethod(ctx, text, fontface, min, max, desiredWidth) { if (max - min < 1) { return min; } var test = min + ((max - min) / 2); //Find half interval ctx.font = test + "px " + fontface; measureTest = ctx.measureText(text).width; if (measureTest > desiredWidth) { var found = measureTextBinaryMethod(ctx, text, fontface, min, test, desiredWidth) } else { var found = measureTextBinaryMethod(ctx, text, fontface, test, max, desiredWidth) } return found; } function color11(v11) { v11 = v11.dataset.id; switch (v11) { case "littleblue": selectedFontColor = "#33ccff"; break; case "orange": selectedFontColor = "#ff9900"; break; } redrawTextsCan11(); } function chfont5(v5) { switch (v5) { case "franklin": selectedTextFont = "Franklin Gothic"; break; case "impact": selectedTextFont = "Impact"; break; } redrawTextsCan11(); } 

  #canvas4 { border: 2px dotted red; border-radius: 5px; } #canvas11 { border: 2px dotted red; border-radius: 5px; } .littleblue { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: #33ccff; } .littleblue:hover, .littleblue:active, .littleblue:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } .orange { border: 0.1px solid #CCC; margin: 1px; zoom: 3; vertical-align: middle; display: inline-block; cursor: pointer; overflow: hidden; width: 22.5px; height: 20px; background-color: orange; } .orange:hover, .orange:active, .orange:focus { border: 1px solid black; box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2); opacity: 0.7; text-decoration: none; text-shadow: -1px -1px 0 #136a65; -webkit-transition: all 250ms linear; transition: all 250ms linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3> <button type="button" class="littleblue" data-id="littleblue" onclick="clubNameColor(this)"></button> <button type="button" class="orange" data-id="orange" onclick="clubNameColor(this)"></button> <h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3> <select name="Font" onchange="changeClubNameFontFamily(this.value)"> <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option> <option value="impact" style="font-family: Impact">IMPACT</option> </select> <h3 style="font-size: 15px;padding-top: 10px">Write text</h3> <form action="" method="POST" id="clubNameTag" class="nametag"> Line1: <input type="text" id="clubNameLine1" maxlength="12" name="line1" style="width:220px; height: 30px" /> <br> <canvas id="canvas4" width=110 height=30 style=" position: absolute; top: 20px; left: 134px; z-index: 10; "></canvas> <!-- second one --> <h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3> <button type="button" class="littleblue" data-id="littleblue" onclick="color11(this)"></button> <button type="button" class="orange" data-id="orange" onclick="color11(this)"></button> <h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3> <select name="Font" onchange="chfont5(this.value)"> <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option> <option value="impact" style="font-family: Impact">IMPACT</option> </select> <h3 style="font-size: 15px;padding-top: 10px">Write text</h3> <form action="" method="POST" id="nametag2" class="nametag"> Line1: <input type="text" id="line4" maxlength="12" name="line1" style="width:220px; height: 30px" /> <canvas id="canvas11" width=110 height=30 style=" position: absolute; top: 60px; left: 134px; z-index: 10; "></canvas> 

Answer 1

In your HTML the closing form tags are missing, so the second form is inside the first. When I added the closing form tags on the jsFiddle things worked as expected.

The reason it was not working was because the eventHandler below to draw "Can4" was also being triggered by changes to the input on the second form (add an alert in the redrawTextsCan4 function before adding the missing form tags and you will see it appears when a character is typed in the lower input field).

$('#clubNameTag').bind('change keyup input', redrawTextsCan4);

So to summarise, the answer is to add the missing closing form tags.