Javascript - Canvas - Create Circle on button click

Question

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?

JavaScript

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

HTML

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript" src="site.js"></script> 
</head>

<body>
    <button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
    <div style = "width:500px; height:150px; margin:0 auto; padding:5px;">
    <canvas id = "canvasArea" width = "500"  height = "550" style = "border:2px solid black"></canvas> 
    </div> 
</body> </html>

http://prntscr.com/hfway5 <- Thats console – vakacjus Nov 27 '17 at 14:33 — vakacjus, Nov 27 '17 at 14:33

Emmanuel Delay · Accepted Answer · 2017-11-27T15:18:07.343

As Diego sais: wrong id.

Also, you better use HTML elements inside a function that's only triggered after the page is loaded.

Edit: Math.random produces a number between 0 and 1. So let's skip the "0." so a substring from character 2, 6 characters long.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript">
  // global variables
  var canvas;
  var ctx;
  // You do not have permission to read from ( nor write to ) HTML elements before the DOM is loaded. 
  window.onload = function() {
    canvas = document.getElementById("canvasArea");
    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).substr(2,6); // random colour;
      // 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();
  }
</script>
</head>
<body>
<button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
<div style="width:500px; height:150px; margin:0 auto; padding:5px;">
    <canvas id="canvasArea" width="500" height="550" style="border:2px solid black"></canvas>
</div>
</body>
</html>

Thank you so much, looks like I wasn't really far from making it happen. Thanks for the help ! — vakacjus, Nov 27 '17 at 14:49
any idea why the colour is basic black instead of randomizing the colour? — vakacjus, Nov 27 '17 at 14:53
[found help here](https://stackoverflow.com/questions/1484506/random-color-generator) — vakacjus, Nov 27 '17 at 15:03

score 1 · Answer 2 · answered Nov 27 '17 at 14:42

You got the wrong ID in line:

var canvas = document.getElementById("myCanvas");

It must be:

var canvas = document.getElementById("canvasArea");

And thats it.

var canvas = document.getElementById("canvasArea");
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();
}

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="site.css">
<script type="text/javascript" src="site.js"></script> 
</head>

<body>
    <button style="margin:0;padding:0;position:relative;left:50px;top:50px;" onclick="drawCircle()">Draw Random Circle</button><br>
    <div style = "width:500px; height:150px; margin:0 auto; padding:5px;">
    <canvas id = "canvasArea" width = "500"  height = "550" style = "border:2px solid black"></canvas> 
    </div> 
</body> </html>

Javascript - Canvas - Create Circle on button click

2 Answers2