電子メールでスクロールせずにキャンバスをhtmlで消去しないでください

Question

私の問題は簡単です。私はhtmlキャンバスで図面ボードを作っています。キャンバス全体をきれいにしたいときを除いて、すべてがうまくいく。

私はこの機能を使用していますが、私は小さなスクロールやブラウザ上で何らかの操作を行うまでキャンバスがクリアされないという点を除いて問題なく動作しています（スクロールするためのハッキングプログラムでスクロールしてもうまくいきませんでした）

ブラウザで特定のイベントの後にキャンバスがリフレッシュされるようですが、このリフレッシュを強制する方法はわかりません。

何が起こっているのか、それをどのように解決するのか？以下

マイコード：

<span><input type="image" src="img/clear1.png" name="clear1" width="50" height="50" onclick="clear1()"></span> 

$(document).ready(function(){ 
    var canvasDiv = document.getElementById('canvasDiv1'); 
    canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', canvasWidth); 
    canvas.setAttribute('height', canvasHeight); 
    canvas.setAttribute('id', 'canvas'); 
    canvasDiv.appendChild(canvas); 
    if(typeof G_vmlCanvasManager != 'undefined') { 
     canvas = G_vmlCanvasManager.initElement(canvas); 
    } 
    context = canvas.getContext("2d"); 
});  

function clear1(){ 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
} 

私は、この問題が唯一の電子

Answer 1

にコンテキスト変数を起こることがわかっただけ$（ドキュメント）.ready（）のスコープで定義されている、それを試してみてください。

$(document).ready(function(){ 
    var canvasDiv = document.getElementById('canvasDiv1'); 
    canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', canvasWidth); 
    canvas.setAttribute('height', canvasHeight); 
    canvas.setAttribute('id', 'canvas'); 
    canvasDiv.appendChild(canvas); 
    if(typeof G_vmlCanvasManager != 'undefined') { 
     canvas = G_vmlCanvasManager.initElement(canvas); 
    } 
    context = canvas.getContext("2d"); 
    window.clear1 = function(){ 
     context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
    } 
});  

または：

// global declaration 
var context = null; 
$(document).ready(function(){ 
//keep your logic here 

}); 
function clear1(){ 
    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
}