Кнопка Clear canvas

Question

Я пытаюсь создать кнопку, чтобы очистить холст, но без успеха.

Мои коды для этого

JS

function clearcanvas1(){ 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
var w = canvas.width; canvas.width = 1; canvas.width = w; 
} 

HTML

<button onmouseover="clearcanvas1()">clear</button> 

Я пробовал другие варианты, такие как

canvas.width = canvas.width; 

и

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

На данный момент я заменил кнопку clear для функции location.reload, но это нарушает вторичный холст на той же странице, которую я хочу работать независимо. Как я могу достичь этого?

Answer 1

Вам не кажется, что получение canvas элемента внутри вашей функции (или даже его контекст) ...

function clearcanvas1() 
{ 
    var canvas = document.getElementById('canvas'), 
     ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
} 

Очевидно, что вам необходимо обновить document.getElementById() представлять правильный идентификатор для вашего или вы можете использовать document.getElementsByTagName().

Answer 2

на кнопку вызова по указанному ниже функцию

function clearall() 
{ 
    var canvas=document.getElementById("canvas+id"); 
    var context=canvas.getContext("2d"); 
    context.clearRect(0,0,canvas.width,canvas.height); 
} 

надеюсь, что это поможет вам. Помните, что эта функция очистит все на холсте.