私はこの上のあなたの助けに感謝のJavascript

Question

を使用して画像をクリアするからキャンバスを防止

var canvas = document.getElementById('QID8-Signature'), 
    context = canvas.getContext('2d'); 
    base_image = new Image(); 
    base_image.src = 'https://adec.qualtrics.com/CP/Graphic.php?IM=IM_dmAm33It7ShDqAt'; 
    base_image.onload = function(){ 
    context.drawImage(base_image, 216, 168); 
    } 

画像が正常に追加されましたが、ただし、クリアボタンを押すと削除されます。クリアボタンがイメージを消去しないようにする方法はありますか？アドバンス

Answer 1

で

おかげで唯一の方法は、キャンバスをクリアした後の画像を再描画する、です。

var clear = document.getElementById('QID10-ClearSignature'), 
 
    canvas = document.getElementById('QID8-Signature'), 
 
    context = canvas.getContext('2d'), 
 
    base_image = new Image(), 
 
    imgLoaded = false; 
 
    
 
base_image.onload = function() { 
 
    imgLoaded = true; 
 
    context.drawImage(base_image, 0, 0, 216, 168); 
 
    context.fillRect(10, 10, 20, 20); 
 
}; 
 
base_image.src = 'https://adec.qualtrics.com/CP/Graphic.php?IM=IM_dmAm33It7ShDqAt'; 
 

 
clear.onclick = function(e) { 
 
    e.preventDefault(); 
 
    if (!imgLoaded) return; 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    context.drawImage(base_image, 0, 0, 216, 168); 
 
}

canvas{border: 1px solid #ccc}

<button><span id="QID10-ClearSignature" class="ClearSignature">clear</span></button><br> 
 
<canvas id="QID8-Signature" width="216" height="168"></canvas>