Curved Line Draw In HTML5 Canvas

I want to draw a curve like this mentioned here in HTML5 canvas. Can someone point to what methods should I use.?

Solution 1:

Yet an other way of doing it is using the method bezierCurveTo

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 536;
let ch = canvas.height = 100;
   
ctx.beginPath();
ctx.moveTo(0,28)
ctx.bezierCurveTo(0,28,31,7,70,8);
ctx.bezierCurveTo(109,9,313,99,425,90);
ctx.bezierCurveTo(516,82.5,536,55,536,55);
ctx.stroke();

canvas{border:1px solid #d9d9d9;}

<canvas></canvas>

Solution 2:

Well that looks roughly like -sin, so you could do something like:

let cnvs = document.getElementById('cnvs')
let ctx = cnvs.getContext('2d');
ctx.beginPath();
for (let i = 0; i < cnvs.width; i++){
    ctx.lineTo(i, cnvs.height/2-Math.sin(i*(Math.PI/180))*50);
}
ctx.stroke()

<canvas id='cnvs'></canvas>

So the idea their is to express your curve as some function of x (here it is -sin(x)) and then use the rendering context's lineTo method to draw lines between different points on that curve. So long as you increment over every few pixels (here 1 is as good as it gets), then you will have the effect of a nice smooth graph.