退格时从输入文本动态增加字体大小

Question

In my code, I have a canvas where I can input 2 lines of text. When I write, text fits into the canvas (the font-size is decreasing) and also I can change the color of it. So when I write into the text input, the text-size is decreasing but if I backspace it doesn't come back to the old size. Can someone please help me with this one? I tried to put another if with (width < 100), and change the int to +1 but it doesn't work. Here is the JSFiddle code: https://jsfiddle.net/dk54jb06/8/ .

 var canvas2 = document.getElementById("canvas2"); var ctx2 = canvas2.getContext("2d"); var selectedTextFont = "Arial Black"; var selectedFontSize = "20px"; var selectedFontStyle = "bold"; var selectedFontColor = "#000000"; $('#nametag').bind('change keyup input', redrawTextsCan2); $('#line2').bind('click', redrawTextsCan2); $('#line3').bind('click', redrawTextsCan2); function redrawTextsCan2() { ctx2.clearRect(0, 0, canvas2.width, canvas2.height); ctx2.textAlign = "center"; ctx2.font = selectedFontStyle + " " + selectedFontSize + " " + selectedTextFont; ctx2.fillStyle = selectedFontColor; var width = ctx2.measureText($('#line1').val()).width; if (width > 100) { var selectedFontSizeInt = (selectedFontSize.replace(/(^\\d+)(.+$)/i,'$1') - 1); selectedFontSize = '' + selectedFontSizeInt + "px"; ctx2.font = selectedFontStyle + " " + selectedFontSize + " " + selectedTextFont; } ctx2.fillText($('#line1').val().toUpperCase(), canvas2.width * 0.5, 20); } function color2(v4) { v4 = v4.dataset.id; switch (v4) { // top: 103px; left: 210px case "black": selectedFontColor = '#000000'; break; case "red": selectedFontColor = "#ff0000"; break; case "green": selectedFontColor = "#009933"; break; case "orange": selectedFontColor = "#ff9900"; break; } redrawTextsCan2(); } function chfont3(v3) { switch (v3) { // top: 103px; left: 210px case "arial": selectedTextFont = "Arial Black"; break; case "comic": selectedTextFont = "Comic Sans MS"; break; case "lucida": selectedTextFont = "Lucida Sans"; break; case "franklin": selectedTextFont = "Franklin Gothic"; break; case "impact": selectedTextFont = "Impact"; break; } redrawTextsCan2(); }

 #canvas2 { border: 2px dotted black; border-radius: 5px; position: absolute; } #canvas3 { border: 2px dotted black; border-radius: 5px; position: absolute; top: 220px; } #canvas4 { border: 2px dotted black; border-radius: 5px; position: absolute; } .green { 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: #009933; } .green:hover, .green:active, .green: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; } .red { 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: #ff0000; } .red:hover, .red:active, .red: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; } .black { 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: black; } .black:hover, .black:active, .black: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; } @font-face { font-family: 'MyFont'; src: url('https://cdn.rawgit.com/lxc698/CustomizePanel/3817e8da/Standard-Regular.ttf'); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 style="font-size: 15px;padding-top: 0px">Choose Colour</h3> <button type="button" class="black" data-id="black" onclick="color2(this)"></button> <button type="button" class="red" data-id="red" onclick="color2(this)"></button> <button type="button" class="green" data-id="green" onclick="color2(this)"></button> <button type="button" class="orange" data-id="orange" onclick="color2(this)"></button> <br> <br> <select name="Font" onchange="chfont3(this.value)"> <option value="arial" selected="selected" style="font-family: Arial Black">ARIAL</option> <option value="comic" style="font-family: Comic Sans MS">COMIC SANS MS</option> <option value="lucida" style="font-family: Lucida Sans">LUCIDA SANS</option> <option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option> <option value="impact" style="font-family: Impact">IMPACT</option> </select> <br> <br> <form action="" method="POST" id="nametag" class="nametag"> Line1: <input type="text" id="line1" maxlength="22" name="line1" style="width:250px;" /> <br> Line2: <input type="text" id="line2" maxlength="22" name="line1" style="width:250px;" /> <br> <br> <canvas width="130px" height="80px" id="canvas2"></canvas>

Answer 1

You can use the e.key attribute.

Documentation

Here pass the event.

redrawTextsCan2(e) {
    if (e.key === 'Backspace') {
        //Calculate the font size.
    }
}