Стирая ранее нарисованные линии на холсте HTML5

Чтобы поиграть с холстом HTML5, я решил сделать приложение, которое отрисовывает аналоговый тактовый интерфейс. Все в порядке, за исключением того, что старые строки не стираются так, как я ожидал. Я включил часть кода ниже - DrawHands() вызывается один раз в секунду:

var hoursPoint = new Object();
var minutesPoint = new Object();
var secondsPoint = new Object();

function drawHands()
{
    var now = new Date();

    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "white", 1);
    var seconds = now.getSeconds();
    secondsPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * seconds, 0.75 * radius);
    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "black", 1);

    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "white", 3);
    var minutes = now.getMinutes();
    minutesPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * minutes, 0.75 * radius);
    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "black", 3);

    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "white", 3);
    var hours = now.getHours();
    if (hours >= 12) { hours -= 12; } // Hours are 0-11
    hoursPoint = getOtherEndOfLine(centerX, centerY, (2 * Math.PI / 12 * hours) + (2 * Math.PI / 12 / 60 * minutes), 0.6 * radius);
    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "black", 3);
}

Чтобы разобраться в этом, есть две вспомогательные функции:

• drawLine(x1, y1, x2, y2, цвет, толщина)
• getOtherEndOfLine(x, y, угол, длина)

Проблема в том, что хотя все руки отрисовываются, как и ожидалось, черным цветом, они никогда не стираются. Я бы ожидал, что поскольку одна и та же линия нарисована белым цветом (цветом фона), она эффективно сотрет то, что было нарисовано ранее в этой точке. Но, похоже, это не так.

Что-нибудь, что я упускаю?