CODEWITHSUNDEEP
javascriptdrawingline
Jumbalaya Wanton
Jumbalaya Wanton

Reputation: 1621

How do I draw wavy lines in JavaScript?

Is it possible to draw a set of wavy lines in JavaScript or using a JavaScript library? My question is somewhat similar to this one, but I have to use JavaScript instead of Objective-C.

To expand more on my question, I want to draw a sequence of three or more lines.

------------------------------
------------------------------
------------------------------

But instead of being straight, I want the lines to produce random curves that cause them to overlap with one another.

Upvotes: 0

Views: 4124

Answers (1)

Stanislau Tarazevich
Stanislau Tarazevich

Reputation: 48

You can do it using html5 canvas with bezierCurveTo method. Though it won't work in browsers which do not support html5.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,70);
ctx.bezierCurveTo(100,10,150,100,200,20);
ctx.stroke();

JSFiddle: http://jsfiddle.net/PLJ89/

Here is documentation for bezierCurveTo method http://www.w3schools.com/tags/canvas_beziercurveto.asp

Upvotes: 1

Related Questions