Cosine Curve on HTML Canvas with JavaScript
A cosine curve on Canvas is created by stepping through x positions, converting each angle from degrees to radians, calculating Math.cos(), and mapping the result from -1…1 into Canvas y coordinates.
Cosine formula Top ↑
const radians = degrees * Math.PI / 180;
const y = centerY - amplitude * Math.cos(radians);The subtraction is needed because Canvas y coordinates grow downward. At 0°, cosine is 1, so the first plotted point appears above the center line.
Plot the curve Top ↑
ctx.beginPath();
for (let degree = 0; degree <= 540; degree += 2) {
const radians = degree * Math.PI / 180;
const y = centerY - amplitude * Math.cos(radians);
if (degree === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();For the JavaScript math function, see Math.sin() and trigonometric examples.
Related Canvas trigonometry demos Top ↑
Sine curve | Slow sine drawing | Sine and cosine together | Slow sine and cosine
Frequently asked questions Top ↑
Does Math.cos() use degrees?
No. It expects radians.
What is the range of cosine?
From -1 to 1.
Why multiply by amplitude?
It scales the mathematical result to a visible pixel height.
How is cosine different from sine?
The curves have the same shape but are phase-shifted by 90 degrees.
Can I plot more than one period?
Yes. Continue increasing the input angle beyond 360 degrees.
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
