clearRect с SetInterval

Question

Ниже мой код

var canvas, context; 
 
var canvas = document.getElementById('board'); 
 
var context = canvas.getContext('2d'); 
 

 
var hex = 50; 
 

 
function drawHex(hexGain) { 
 
    context.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (hexGain <= 0) return; 
 
    x = canvas.width/2 - hexGain; 
 
    y = canvas.height/2; 
 
    context.moveTo(x, y); 
 
    x += hexGain/2; 
 
    y -= hexGain/2; 
 
    context.lineTo(x, y); // now render it per our style definitions 
 
    x += hexGain; 
 
    y += 0; 
 
    context.lineTo(x, y); 
 
    x += hexGain/2; 
 
    y += hexGain/2; 
 
    context.lineTo(x, y); 
 
    x -= hexGain/2; 
 
    y += hexGain/2; 
 
    context.lineTo(x, y); 
 
    x -= hexGain; 
 
    y += 0; 
 
    context.lineTo(x, y); 
 
    x -= hexGain/2; 
 
    y -= hexGain/2; 
 
    context.lineTo(x, y); 
 
    context.strokeStyle = "rgba(0,0,0,1)"; 
 
    context.stroke(); 
 
} 
 

 
window.setInterval(function() { 
 
    drawHex(hex); 
 
    hex -= 5; 
 
}, 1000);

<canvas id="board"></canvas>

Я не могу рисовать и шестиугольник, секундочку, очистить холст, сделать поменьше и так далее. Я не понимаю, почему clearRect не вызывается. я в основном нужна анимация в шестиугольник, который меньше и меньше

С уважением,

Answer 1

Вы забыли назвать context.beginPath(), когда вы начинаете рисовать.

Так что происходит, что полотно действительно очищает, но вы добавляете второй шестиугольник к «пути», который рисуется. Затем другой, и другой.