Plotting with HTML5 Canvas

Question

I decided to day to embark on element and I can say so far it have been nightmare to get it work. All I want is to plot a sine graph. So after good reading I still cannot either get origins nor get it plot. Below is what I have tried (my first time ever with that tag so excuse my ignorance). What makes me wonder is the guy here have it but the codes are hard to understand for beginner like me.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Graphing</title>
        <link type="text/css" rel="Stylesheet" href="graph.css"  />
        <script type="text/JavaScript" src="graph.js" ></script>
    </head>

    <body>
        <canvas id="surface">Canvas not Supported</canvas>        
    </body>

</html>

CSS

#surface
{
    width:300;
    height:225;
    border: dotted #FF0000 1px;
}

JavScript

window.onload = function() 
{
    var canvas = document.getElementById("surface");
    var context = canvas.getContext("2d"); 

    arr = [0,15, 30,45,60, 90,105, 120, 135, 150, 165, 180  ];
    var x=0;
    var y = 0;
    for(i=0; i<arr.length; i++)
    {
        angle = arr[i]*(Math.PI/180); //radians
        sine = Math.sin(angle);

        context.moveTo(x,y);
        context.lineTo(angle,sine);
        context.stroke();

        //set current varibles for next move
        x = angle;
        y = sine;
    }


}

Check out this answer here, should give you something to go on: stackoverflow.com/questions/6032998/… — John Powell
– John Powell, Commented Apr 21, 2014 at 21:08
I was able to generate a jsfiddle with the code minus some html elements. See here. jsfiddle.net/franktudor/4wv9r — Frank Tudor
– Frank Tudor, Commented Apr 21, 2014 at 21:09
Well, sin's domain is between -1 and 1, that's why you only see a dot. — Derek 朕會功夫
– Derek 朕會功夫, Commented Apr 21, 2014 at 21:23
*What I meant is range... But anyway, here is a working demo (edited from your code): jsfiddle.net/DerekL/hK5rC — Derek 朕會功夫
– Derek 朕會功夫, Commented Apr 21, 2014 at 21:30
@Derek朕會功夫 that is exactly the answer. I would request you put as answer with explanations (I find hard to understand how you put it) and Am happy to accept it! — Stefano Mtangoo
– Stefano Mtangoo, Commented Apr 21, 2014 at 21:42

Derek 朕會功夫 · Accepted Answer · 2014-04-23 01:43:48Z

Since the range of sin x is [-1,1], it will only return numbers between -1 and 1, and that means all you will be drawing is a dot on the screen.

Also I see that you have an array ranging from 0 to 180. I believe you are trying to draw the curve with x from 0 degree to 180 degree? You don't really need to do this (anyway 12 points are not enough to draw a smooth line). Just do it with a for loop, with lines being the number of fragments.

First we start off by moving the point to the left of the canvas:

context.moveTo(0, 100 /*somewhere in the middle*/);     //initial point

In most cases the first point won't be in the middle. But for sine it is. (You might want to fix it later though.)

for (var i = 0; i < lines; i++) {
    //draw line
}

That's the loop drawing the curve. But what should we put inside? Well you can just take the number returned by the sine function and scale it up, flip it upside down, and shift it down half the way. I do that because the coordinate system in JavaScript is 0,0 in the top left instead of in the bottom left.

var sine = Math.sin(i/scale*2)*scale;
context.lineTo(i*frag, -sine+scale);

//i * frag      = the position of x scaled up
//-sine + scale = the position of y, flipped, scaled, shifted down
//i/scale*2     = random scale I put in... you might want to figure out the
//                correct scale with some math

So that's it. Viola, you have successfully plotted a graph in JavaScript.

Oh yes, don't forget to actually tell it to draw it on the canvas after the for loop has done its job:

context.stroke();

The demo: http://jsfiddle.net/DerekL/hK5rC/

PS: I see that you are trying to resize the canvas using CSS. Trust me, it won't work. :) You will have to define the dimension in HTML.

Collectives™ on Stack Overflow

Plotting with HTML5 Canvas

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related