drawing sine wave in canvas

Question

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://jsfid

Answer 1

Your code is unnecessarily difficult. Try it so simple:

    var c = document.getElementById("myCanvas"); // get the canvas object to draw onto
    var ctx = c.getContext("2d"); // will use simpe 2D context on the canvas
    
    for(x=0; x<360; x += 20) { // 360 steps for entire sine period
        ctx.moveTo(x+10,180);  // for dashed line, go to start of next dash
        ctx.lineTo(x,180);  // then draw the short line
    }
    ctx.moveTo(0,180);  // back to the left before drawing the sine
    
    for(x=0; x<=360; x+=1) { // 360 steps (degrees) for entire sine period
        y = 180.0 - Math.sin(x*Math.PI/180)*120; // calculate y flipped horizontally, converting from DEG to RADIAN
        ctx.lineTo(x,y); // draw the point
    }
    ctx.stroke(); // strokes the drawing to the canvas