html Eingabe in Canvas akzeptieren Rücktaste

Question

Ich versuchte mit Keydown und keyup seine Darstellung in Leinwand, aber wenn ich 'Backspace' drücken oder löschen Sie den Text immer noch nicht löschen.

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 

 
// do cool things with the context 
 
context.font = '40pt Calibri'; 
 
context.fillStyle = 'blue'; 
 
$('input').keydown(function(e){ 
 
     
 
    if(e.keyCode==8) 
 
    { 
 
    var newvalue = $(this).val(); 
 
    context.fillText(newvalue, 150, 100); 
 
    } 
 
}); 
 
$('input').keyup(function(){ 
 
    context.fillText($(this).val(), 150, 100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="text" value=""> 
 
<canvas id="myCanvas" width="578" height="200"></canvas>

Answer 1

Sie benötigen eine Leinwand vor dem Neuaufbau löschen alle bereits gefüllt Pixel zu entfernen:

context.clearRect(0, 0, canvas.width, canvas.height); 

Wie Sie vielleicht bemerkt haben, ist es dein Charakter nicht löschen, Aber wenn Sie einen anderen Buchstaben eingegeben haben, überlagert er diesen auch gegenüber dem vorherigen - deshalb müssen Sie den Text vor dem Neuzeichnen löschen.

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 

 
// do cool things with the context 
 
context.font = '40pt Calibri'; 
 
context.fillStyle = 'blue'; 
 
$('input').keydown(function(e){ 
 
    if(e.keyCode==8){ 
 
    var newvalue = $(this).val(); 
 
    context.clearRect(0,0,canvas.width,canvas.height); 
 
    context.fillText(newvalue, 150, 100); 
 
    } 
 
}); 
 
$('input').keyup(function(){ 
 
    context.clearRect(0,0,canvas.width,canvas.height); 
 
    context.fillText($(this).val(), 150, 100); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<input type="text" value=""> 
 
<canvas id="myCanvas" width="578" height="200"></canvas>

Answer 2

Überprüfen Sie bitte die folgenden Code-Schnipsel, Sie clearRect verwenden (0, 0, canvas.width, canvas.height) die Leinwand zu löschen.
Ich denke, Sie brauchen nicht wirklich beide keyup & Keydown Event.

var canvas = document.getElementById('myCanvas'); 
 
var context = canvas.getContext('2d'); 
 

 
// do cool things with the context 
 
context.font = '40pt Calibri'; 
 
context.fillStyle = 'blue'; 
 

 
$('input').keyup(function() { 
 
    context.clearRect(0, 0, canvas.width,canvas.height); 
 
    context.fillText($(this).val(), 150, 100); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value=""> 
 
<canvas id="myCanvas" width="578" height="200"></canvas>