javascript - What is wrong with these sine calculations in this html5 canvas implentation -

i know can use guess-and-check javascript math, results of seem wildly incorrect, i'd know wrong math. (the sine doesn't display @ all, can if change numbers around -- doesn't make sense mathematically me.) checked online graphing calculator, test here (with width , height of canvas): https://www.desmos.com/calculator/ohs4l3jxkc , seems correct. here's working jsfiddle of implementation http://jsfiddle.net/jv5v3/ ease of use.

html:

 <canvas style="width:100%;height:50px;"></canvas> 

javascript:

makewave($("canvas")); function makewave(canvas){     var twopi = math.pi * 2;     var width = canvas.css('width').replace(/\d/g,'');     var height = canvas.css('height').replace(/\d/g,'');     var xmulti = width/twopi;      var c = canvas[0];     var context=c.getcontext("2d");     for(var = 0; < width*2; i++){         var sineval = (-1*math.sin(i/xmulti)*(height/2)) + (height/2);         sineval = math.round(sineval);         context.rect(i,sineval,1,1);                     }     context.stroke();      //scroll      var imagedata = context.getimagedata(0, 0, width*2, height);     var count = -1;     setinterval(function(){         context.clearrect(0, 0, width,height);         context.putimagedata(imagedata, count+width, 0);         context.putimagedata(imagedata, count, 0);         --count;         if(count <= -width) {             clearinterval(this);         }     },60); } 

here's updated jsfiddle couple corrections: http://jsfiddle.net/jv5v3/2/ still, it's not displaying it's intended to.

context.rect(i,-sineval,1,1); 

sineval shouldn’t made negative here; you’ve added height / 2 it, that’ll above visible portion of canvas. updated fiddle.