キャンバスへのhtml入力がバックスペースを受け入れる

Question

keydownを使用してキャンバスでの表示を試みましたが、「バックスペース」を押すか、テキストを削除しても削除されません。

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

あなたはどんな既に満たされたピクセルを削除するために再描画する前に、あなたのキャンバスをクリアする必要があります：

あなたは気づいているかもしれませんが

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

、それはあなたの文字を削除しませんでした、別の文字を入力した場合は、前の文字に重ねて表示されるため、再描画する前にクリアする必要があります。

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

あなたはキャンバスをクリアするclearRect（0、0、canvas.width、canvas.height）を使用することができ、以下のスニペットを確認してください。
キーアップの両方が必要なのではないかと思います& keydownイベント。

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>