html canvas не перерисовывает

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(); 
     }); 
    }); 

Answer 1

Там должно быть beginPath и closePath методы.

$ctx.beginPath(); 
$ctx.rect(x-radius, y-radius, 2*radius+1, 2*radius+1); 
$ctx.strokeStyle = 'black'; 
$ctx.stroke(); 
$ctx.closePath();