Hi guys,

I wanted to draw a curved line using javacsript...
I know can draw a straight line, cirle, rectangle, arc..
But if i wanna draw a curved line in a graph...
how can it be done..Its like ..
oN Click , then the curved line appears...


10 Years
Discussion Span
Last Post by MidiMagic

We use the technique from calculus of dividing a curve up into a lot of very short straight lines:

- Define the curve with arrays. Use an array of x coordinates for the points in curve, and an array of the y coordinates.

- Draw a line from the x,y coordinate of the first point to the x,y of the second point, then from the second point to the third, then from the third to the fourth, etc. Use a loop to read the values.


One idea is to make a sine wave using the sine function:

var x = Array(50);
var y = Array(50);

function makesine(){
  var i;
  for(i=0; i<50;i++){
    x[i] = i/10.0;
    y[i] = Math.sin(x[i]);

function showgraphic(){
  var i, px, py;
  px = x[0]; py = y{0};
  for(i=1; i<50;i++){
    drawLine(px, py, x[i], y[i]);
    px = x[i]; py = y{i};

Change the drawLine function if you have a different package.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.