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>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>Please define the 'O' variable that's way gives the error . add let O =50 in draw() you will get result