Rectangle продолжает появляться после context.clearRect();

Question

У меня проблемы с .rect(). Я создал сетку, используя .drawImage(canvas...), и всякий раз, когда я .stroke(), он появляется снова. Как я могу полностью удалить этот прямоугольник?

С уважением

---

Working jsFiddle

---

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

    wt = canvas.width, 
    ht = canvas.height; 

canvas.onmousedown = function (e) { 
    e.preventDefault(); // disabling selecting 
    context.strokeStyle = "red"; 
    context.lineWidth = 1; 
    context.rect(wt/2 - 50, ht/2 - 100, 100, 200); 
    context.fillText("<- why is it here? didn't \"clearRect()\" delete it?", 8, 8); 
    context.stroke(); 
}; 

function grid() { 
    var h = 2.5, 
     p = 2.5; 
    context.rect(0.5, 0.5, 5, 5); 
    context.strokeStyle = "#f0f0f0"; 
    context.stroke(); // creating a 5x5 small rectangle in top left corner 
    for (i = 0; i < wt; i += p) { 
     p *= 2; 
     context.drawImage(canvas, p, 0); // replicating it horizontally... 
    } 
    for (i = 0; i < ht; i += h) { 
     h *= 2; 
     context.drawImage(canvas, 0, h); // ... and vertically 
    } 
    context.clearRect(0, 0, 5, 5); // here I am deleting that stroke, because I don't need it anymore 
    context.drawImage(canvas, 0, 55, 5.5, 5.5, 0, 0, 5.5, 5.5); // drawing it with drawImage(); 
} 
grid(); 

Answer 1

clearRect очищает часть холста, а не часть пути вы рисунок с rect. Вызовите beginPath(), чтобы очистить предыдущий rect от включения, когда применяется удар.

See this updated example.