title: Javascript - Canvas - Create Circle on button click
body: <p>iam trying to force my html button to draw a circle on canvas area but I dont know what Iam doing wrong. Can some1 point it for me?</p>
  
  <p>JavaScript</p>
  
  <pre><code>var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  // Funkcja
  function drawCircle(size,xPos,Ypos,colour){    //draw circle
      var xPos = Math.floor(Math.random() * 501);
      var yPos = Math.floor(Math.random() * 501);
      var size = Math.floor(Math.random() * 100);
      var colour = '#' + Math.random().toString(16).substring(4); // random colour;
      ctx.beginPath();
      ctx.arc(xPos,yPos,size,0,2*Math.PI);
      ctx.fillStyle = colour;
      ctx.fill();
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="site.css"&gt;
  &lt;script type="text/javascript" src="site.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()"&gt;Draw Random Circle&lt;/button&gt;&lt;br&gt;
      &lt;div style = "width:500px; height:150px; margin:0 auto; padding:5px;"&gt;
      &lt;canvas id = "canvasArea" width = "500"  height = "550" style = "border:2px solid black"&gt;&lt;/canvas&gt; 
      &lt;/div&gt; 
  &lt;/body&gt; &lt;/html&gt;
  </code></pre>