How to draw bottom half of a circle in canvas
-
25-10-2019 - |
Question
I am trying to draw the the bottom half of the circle using the appropriate x=cos(theta), y=sin(theta) functions. If I iterate theta from Math.PI to 2*Math.PI I seem to be getting the upper half of the circle instead:
What am I doing wrong in this code snippet:
window.onload = function()
{
var canvas = document.getElementById('circle-canvas');
if (canvas && canvas.getContext) {
var context = canvas.getContext('2d');
if (context) {
context.strokeStyle = "#369";
context.lineWidth = 4;
j = canvas.width / 2;
k = canvas.height / 2;
r = canvas.width / 4;
function computeX(theta, r, j, k){ return r * Math.cos(theta) + j; }
function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; }
start = Math.PI;
context.lineTo(computeX(start, r, j, k), computeY(start, r, j, k));
for(var theta = start; theta <= (2*Math.PI); theta += .1)
{
x = computeX(theta, r, j, k);
y = computeY(theta, r, j, k),
context.lineTo(x, y);
}
context.stroke();
context.closePath();
}
}
}
EDIT: I am aware of the arc function. I need to implement the arc this way because this will be used as part of a bigger problem where I need to compute each individual point of the arc.
Solution
Just put a - before r
y = computeY(theta, -r, j, k),
Tested and it works
OTHER TIPS
There is an arc
function.
var canvas = document.getElementById("circle-canvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 4;
var radius = canvas.width / 4;
// I think these values are the angles for the bottom half - otherwise use other values
var startingAngle = Math.PI;
var endingAngle = 0;
var counterclockwise = true;
context.arc(centerX, centerY, radius, startingAngle,
endingAngle, counterclockwise);
context.lineWidth = 4;
context.strokeStyle = "#369";
context.stroke();
You need to change the start to 0
, and the end point to Math.Pi
Not quite sure why, but it appears that canvas goes clockwise, not anticlockwise.
See here for an example: http://jsfiddle.net/kvAzb/1/
Above solution works, but it not the correct solution. New solution below:
EDIT
Aha, Roger's comment explains it. Canvas coordinates start with 0,0 as the top-left corner, not the bottom-left corner. You therefore need to flip your computeY
function.
function computeY(theta, r, j, k){ return r * Math.sin(theta) + k; }
changes to
function computeY(theta, r, j, k){ return canvas.height - (r * Math.sin(theta) + k); }
There is a function to do just do for you, arc
.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.arc(256, 128, 128, Math.PI, 0, true);
context.stroke();
quick guess, try changing the sign(if you're using positive relative coords, try using negatives)