Untitled

<!DOCTYPE html>
<html lang="pl">
<head>
 <meta charset="utf-8">
 <title>Canvas</title>
 <script type="text/javascript">


var r = 400;
var xsr = 500;
var ysr = 500;

  function fill(){
    var canvas = document.getElementById('image');
    var context = canvas.getContext('2d');
    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
    var x = event.clientX - canvas.offsetLeft;
    var y = event.clientY - canvas.offsetTop;

    var width = canvas.width;
    var xpom;
    context.strokeStyle = 'rgb('+19+', '+32+', '+112+', '+255+')';

    for(let i = ysr + r-2; i> ysr - r-2; i--){
      xpom = Math.sqrt(r*r-(i-ysr)*(i-ysr));
      context.beginPath();
      context.moveTo(xsr-xpom+3, i);
      context.lineTo(xsr+xpom-3, i);
      context.stroke();
    }
  }

 function draw() {
   var cb = [26, 192, 42, 255];
   var canvas = document.getElementById('image');
   var context = canvas.getContext('2d');
   var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);

   context.lineWidth = 3;
   context.strokeStyle = 'rgb('+cb[0]+', '+cb[1]+', '+cb[2]+', '+cb[3]+')';

   context.beginPath();
   context.arc(xsr, ysr, r, 2*Math.PI, 0, false);
   context.closePath();
   context.stroke();

 }
 </script>
</head>
<body>
<form>

<br>
<input type="button" name="a" value="Rysuj" onclick="draw();"><br>
 <canvas id="image" width="1000" height="1000" onclick="fill()">
</canvas>
</form>
</body>
</html>