html - HTMLキャンバスが再描画されない

Question

色とりどりのキャンバスを描画し、クリックすると再描画され、黒い長方形が描画されます。しかし、長方形は削除されません! 私が間違っていることは何ですか？デモ: http://jsfiddle.net/82nnJ/

    function draw_palette() {
        $c = document.getElementById('palette');
        $ctx = $c.getContext('2d');
        var size = 256;
        $ctx.clearRect(0, 0, size, size); //
        var r = 255;
        var a = 255;
        for (var g = 0; g < size; g++) {
            for (var b = 0; b < size; b++) {
                $ctx.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", " + (a/255) + ")";
                $ctx.fillRect(g, b, 1, 1);
            }
        }
    }
    jQuery(document).ready(function() {

        draw_palette();

        $('#palette').click(function(e) {
            draw_palette();
            var x = e.pageX - $(this).position().left;
            var y = e.pageY - $(this).position().top;
            var radius = 5;
            $ctx.rect(x-radius, y-radius, 2*radius+1, 2*radius+1);
            $ctx.strokeStyle = 'black';
            $ctx.stroke();
        });
    });