clearing leinwand in html nicht erfrischend ohne scroll in elektron

Question

mein problem ist einfach, ich habe ein reißbrett in html canvas gemacht. Alles funktioniert gut, außer wenn ich die ganze Leinwand klemmen möchte.

Ich benutze diese Funktion context.clearRect(0, 0, context.canvas.width, context.canvas.height); und es funktioniert gut, außer dass die Leinwand die meiste Zeit nicht gelöscht wird, bis ich eine kleine Rolle oder eine Aktion im Browser (ich habe sogar versucht, einen Hack zum scrollen machen programmgesteuert nach dem Scrollen und es hat nicht funktioniert)

Es scheint mir wie die Leinwand nur nach einem bestimmten Ereignis im Browser aktualisiert, aber ich weiß nicht, wie diese Aktualisierung erzwingen.

Irgendeine Idee von was passiert und wie man es löst?

Mein Code unten:

<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); 
} 

Ich fand, dass dieses Problem tritt nur bei Elektronen

Answer 1

Die Kontextvariablen sind nur in $ definiert (document) .ready() Umfang, versuchen Sie es:

$(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); 
    } 
});  

Oder:

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

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