Javascript Canvas Redrawingしかし、以前描かれた長方形を参照してください

私は特定の領域を選択しているかのように、HTMLキャンバス上で再描画の四角形を維持しようとしています。Javascript Canvas Redrawingしかし、以前描かれた長方形を参照してください

（マウスキーを押しながら）マウスポインタを動かすと、私はredrawを呼び出してキャンバスをクリアし、グローバルに保存された座標に対応する矩形を再描画します。

マウスのマウスイベントごとにキャンバスがクリアされるので、キャンバス内に1つの矩形しか表示されないことが予想されますが、長方形が多すぎます。ここで

は私のコードです：

<canvas id="image" width="0" height="0" style="background-color: orange"></canvas> 
<script> 
var mousedown = false; 
var x1; 
var y1; 
var x2; 
var y2; 
document.getElementById("image").onmousedown = function(e) { 
    mousedown = true; 
    x1 = e.offsetX; 
    y1 = e.offsetY; 
    console.log(e.offsetX); 
    console.log(e.offsetY); 
    var canvas = document.getElementById("image") 
    var context = canvas.getContext("2d"); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    console.log('clean'); 
} 
document.getElementById("image").onmouseup = function(e){ 
    mousedown = false; 
} 
document.getElementById("image").onmousemove = function(e) { 
    if (mousedown) { 
     x2 = e.offsetX; 
     y2 = e.offsetY; 
     redraw() 
    } 
} 

function redraw() { 
    var canvas = document.getElementById("image") 
    var context = canvas.getContext("2d"); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.rect(x1, y1, (x2 - x1), (y2 - y1)); 
    context.stroke(); 
} 
</script>

そして結果は次のとおりです。