when typing on canvas-backspace key types the character backspace instead of deleting the characters - Jquery

Anjali
March 25, 2023
240 views
0 votes
2 Answers

I have the following code on my razor page. When I click the backspace key then it starts typing backspace. below is the screen shot:

below is the JavaScript code:

<script>
        var tempContext = null;
        var x = 100
        window.onload = function () {
            var canvas = document.getElementById("canvas");
            console.log(canvas.parentNode.clientWidth);
            canvas.width = canvas.parentNode.clientWidth;
            canvas.height = canvas.parentNode.clientHeight;
            tempContext = canvas.getContext("2d");
            tempContext.fillStyle = "blue";
            tempContext.font = "20px Journal";

            canvas.focus();
            window.addEventListener('keydown', doKeyDown, true);

        }

        function doKeyDown(e) {

            tempContext.fillText(e.key, x, 60);
            x += 9
            e.preventDefault();

        }
</script>

below is the canvas:

   <div id="my_painter">
        <canvas id="canvas" tabindex="0"></canvas>
    </div>

any help will be greatly appreciated.

Answers

I am writing this answer as per my response to your this question.

To make the backspace key work, you need to do the following things-

Use String.fromCharCode(keyID) to convert the pressed key’s key code into the character otherwise when you press any special key it will print it as an exact character like "TAB" or "BACKSPACE" etc.
Store each character in an array so we can remove the character one by one with the press of the backspace key.
When the backspace key is pressed, pop the last element from the array and re-draw the canvas with the remaining elements in the array.

Here is a working demo where I added the necessary comments to explain the code-

var tempContext = null;
window.onload = function() {
  var canvas = document.getElementById("canvas");
  canvas.width = canvas.parentNode.clientWidth;
  canvas.height = canvas.parentNode.clientHeight;
  tempContext = canvas.getContext("2d");
  tempContext.fillStyle = "blue";
  tempContext.font = "20px Journal";
  canvas.addEventListener('keydown', doKeyDown, true);
  canvas.focus();
}

var x = 100;
var characters = [];

function doKeyDown(e) {
  var keyID = e.keyCode ? e.keyCode : e.which;
  // Press on backspace key
  if (keyID === 8) { 
    if (characters.length > 0) {
      // Remove the last character
      characters.pop();
      // Clear the canvas
      tempContext.clearRect(0, 0, canvas.width, canvas.height);
      // Reset the xpos as canvas will be re-draw
      x = 100;
      // Redraw all the characters except the last one
      for (var i = 0; i < characters.length; i++) { 
        tempContext.fillText(characters[i], x, 60);
        x += 9;
      }
    }
  } 
  // Press on other keys
  else { 
    var character = String.fromCharCode(keyID).toLowerCase();
    // Add the character to the array
    characters.push(character); 
    tempContext.fillText(character, x, 60);
    x += 9;
  }
  e.preventDefault();
}

<div id="my_painter">
  <canvas id="canvas" tabindex="0"></canvas>
</div>

The reason why it writes “Backspace” is because you’ve told the program to display the name of any character pressed.

The solution is quite simple though. You just need to detect if backspace is pressed and then remove the last character. The problem with your current code is you’re not storing the characters, which makes this almost impossible.

I’ve modified the code for you below. The comments should point you in the right direction.

var tempContext = null;
var chars = [] // empty array of text

window.onload = function () {
    var canvas = document.getElementById("canvas");
    console.log(canvas.parentNode.clientWidth);
    canvas.width = canvas.parentNode.clientWidth;
    canvas.height = canvas.parentNode.clientHeight;
    tempContext = canvas.getContext("2d");
    tempContext.fillStyle = "blue";
    tempContext.font = "20px Journal";

    canvas.focus();
    window.addEventListener('keydown', doKeyDown, true);

}

function doKeyDown(e) {
    // decide to delete or add a character
    if (e.key == “Backspace”) {if (chars.length) chars.pop()}
    else chars.push(e.key)

    // draw text
    var x = 100
    for (char in chars) {
        tempContext.fillText(char, x, 60);
        x += 9
    }
        
    e.preventDefault();

}

Please signup or login to give your own answer.

Click here to cancel reply.

when typing on canvas-backspace key types the character backspace instead of deleting the characters – Jquery

Answers