javascript - HTML5 でキャンバスをクリアできない

Question

HTMLページにいくつかのキャンバスがレイヤー化されています。ユーザーが選択できる画像を表示する最上層を変更できるようにしたいと考えています。

問題は、 clearRect を呼び出すたびに、キャンバスが一瞬クリアされ、前の画像が読み込まれることです。

これは私のJavaScriptコードです:

window.onload = function(){
    init();
    drawAll();  
}
function clear(){
    ctx2.clearRect(0,0,WIDTH,HEIGHT);
}

function init() {
    city.src ="city.png";
    image2.src="image.png";
    layer1 = document.getElementById("layer1");
    ctx1 = layer1.getContext("2d");
    layer2 = document.getElementById("layer2");
    ctx2 = layer2.getContext("2d");
}


function drawAll() {
    draw1();
    draw2();
}

function draw2() {
    ctx2.clearRect(0,0,WIDTH,HEIGHT);
    ctx2.drawImage(image2, 240, 200);
}

function draw1() {
    ctx1.clearRect(0, 0, WIDTH, HEIGHT);
    ctx1.drawImage(city, 0, 0);
}

なぜこうなった？私は何が欠けていますか？