CODEWITHSUNDEEP
javascripthtmlcanvas
user16612111
user16612111

Reputation:

How to draw a circle with on button click with javascript

I decided to try JavaScript graphics today and I managed to find a function called draw() which is supposed to get the drawing context from a canvas object and call some draw methods from a canvas object to draw a figure.

Logic

I hard coded a canvas html tag and gave it an id.. Accessed the canvas object from my JavaScript draw() function and then accessed the same canvas two dimension drawing context and called some shots on the drawing methods found in the two dimension drawing context object.

Expectation

I expected my code to draw a black circle on the canvas in the body tags when i click the draw button but there seems to a problem with the draw() function please help

function draw() {
  //get the drawing canvas
  let canvas = document.getElementById("mycanvas");
  //check if the context returns true
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    //get the co ordinates
    let X = canvas.width / 2;
    let Y = canvas.height / 2;
    //define the radius
    let R = 45;
    //begin drawing the circle
    ctx.beginPath();
    ctx.arc(X, Y, R, O, 2 * Math.PI, false);
    //set the thickness of the draw print
    ctx.lineWidth = 3;
    //set the color of the draw print
    ctx.strokeStyle = "#111";
    //start drawing the object
    ctx.stroke();
  }
}
canvas {
  height: 300px;
  width: 300px;
}

.mybutton {
  background: #964b00;
  color: #fff;
  font-size: 22px;
  padding: 5px;
  font-family: serif;
  text-align: center;
}
<!--declare a canvas object we will use to draw the circle-->
<center><canvas id="mycanvas"></canvas></center>
<center><button class="mybutton" onclick="draw()">mybutton</button></center>

Upvotes: 0

Views: 1308

Answers (2)

Wasim Akram Biswas
Wasim Akram Biswas

Reputation: 9

Please define the 'O' variable that's way gives the error . add let O =50 in draw() you will get result

Upvotes: 0

Ran Turner
Ran Turner

Reputation: 18156

You passed an undefined variable (O) for the sAngle paramater.

I assume you meant to pass 0 which will make it work (in radians 0 is at the third o'clock position of the arc's circle)

function draw() {
  //get the drawing canvas
  let canvas = document.getElementById("mycanvas");
  //check if the context returns true
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    //get the co ordinates
    let X = canvas.width / 2;
    let Y = canvas.height / 2;
    //define the radius
    let R = 45;
    //begin drawing the circle
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    //set the thickness of the draw print
    ctx.lineWidth = 3;
    //set the color of the draw print
    ctx.strokeStyle = "#111";
    //start drawing the object
    ctx.stroke();
  }
}
canvas {
  height: 300px;
  width: 300px;
}

.mybutton {
  background: #964b00;
  color: #fff;
  font-size: 22px;
  padding: 5px;
  font-family: serif;
  text-align: center;
}
<!--declare a canvas object we will use to draw the circle-->
<center><canvas id="mycanvas"></canvas></center>
<center><button class="mybutton" onclick="draw()">mybutton</button></center>

Upvotes: 0

Related Questions