Rao Rao - 1 month ago 17
HTML Question

drawing sine wave in canvas

I am trying to draw a simple sine wave in a canvas but i am not getting it right. this is my desired output as in the picture.

What I have got so far is
http://jsfiddle.net/RaoBurugula/gmhg61s6/4/

Thank you for your help in advance
HTML

'<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">`


JS

'var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;
for(i=0; i<360; i+= 20){
ctx.moveTo(i+5,180);
ctx.lineTo(i,180);

}
ctx.stroke();
var counter = 0, x=0,y=180;

//100 iterations
var increase = 90/180*Math.PI ;
for(i=0; i<=180; i+=10){

ctx.moveTo(x,y);
x = i;
y= 180 - Math.sin(counter);
counter += increase;

ctx.lineTo(x,y);
alert( " x : " + x + " y : " + y) ;
}
ctx.stroke();'


My desired output

My desired output

Answer

You are increasing counter with a value that it too high, make it smaller:

var increase = 90/180*Math.PI / 9;

Draw the whole width of the diagram instead of half:

for(i=0; i<=360; i+=10){

You need a higher amplitude:

y =  180 - Math.sin(counter) * 120;

Demo: http://jsfiddle.net/Guffa/gmhg61s6/5/

Comments