title: How to fill color/make visible the canvas circle
body: <p>This is a canvas JavaScript code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width="500" height="500" style="border:1px solid"&gt;&lt;/canvas&gt;
  
  &lt;script&gt;
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var radius = 50;
    var nStartX = 0;
    var nStartY = 0;
    var bIsDrawing = false;
    var putPoint = function(e) {
      nStartX = e.clientX;
      nStartY = e.clientY;
      bIsDrawing = true;
      radius = 0;
    }
    var drawPoint = function(e) {
      if (!bIsDrawing)
        return;
      var nDeltaX = nStartX - e.clientX;
      var nDeltaY = nStartY - e.clientY;
      radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(nStartX, nStartY, radius, 0, Math.PI * 2);
      context.fill();
      context.fillStyle = 'rgba(0, 0, 0, 0)';
      context.lineWidth = 1;
      context.stroke();
    }
    var stopPoint = function(e) {
      bIsDrawing = false;
    }
    canvas.addEventListener('mousedown', putPoint);
    canvas.addEventListener('mousemove', drawPoint);
    canvas.addEventListener('mouseup', stopPoint);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want radius to be shown or filled with color.</p>
  
  <p>This is requirement. Start with a single left mouse click (down action) which will be the center of the circle and move the mouse without lifting the left mouse button to set the radius of the circle. The circle should be drawn as you move the mouse with radius equal to distance between the first point and the mouse position. Release the left mouse button to fix the radius. A marker is added at the point where the mouse button is released to mark that point. (This will be the point on the circumference of that circle)</p>