Sine Curve on HTML Canvas with JavaScript
A sine curve on Canvas is created by converting each angle to radians, evaluating Math.sin(), scaling the result, and joining the points with line segments.
Sine formula Top ↑
const radians = degrees * Math.PI / 180;
const y = centerY - amplitude * Math.sin(radians);Draw the curve Top ↑
ctx.beginPath();
for (let degree = 0; degree <= 540; degree += 2) {
const y = centerY - amplitude * Math.sin(degree * Math.PI / 180);
if (degree === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.stroke();Math.sin() expects radians. See JavaScript Math.sin() for additional examples.
Related Canvas demos Top ↑
Slow-motion sine curve | Cosine curve | Sine and cosine together | Slow sine and cosine
Frequently asked questions Top ↑
Does Math.sin() accept degrees?
No. Convert degrees to radians first.
What is the range of sine?
From -1 to 1.
Why subtract the sine value from centerY?
Canvas y coordinates increase downward.
What controls the height of the wave?
The amplitude multiplier.
How do I draw more cycles?
Increase the angle range 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.
