How to draw an irregular / elongated line using svg / canvas?

Question

I want to draw a vertical line that is resizable (based on the contents of the page), but it looks like a drawing, not a straight line.

I am currently thinking of using SVG or Canvas to achieve this. The line will work on the side of my web page, so it needs to be scaled between the top and bottom of the container. How can I achieve this?

Answer 1

So you want to draw a line with a jitter?

Try to draw a bunch of consecutive Bezier curves, while all parts of the Y axis point are evenly distributed and randomize the x values ​​by a certain amount.

Here is an example to get you started:

var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); function addJitteryBezier(fromx, fromy, tox, toy) { var diffx = tox - fromx; var diffy = toy - fromy; var neg = Math.random()*diffy/5; // so the x value can go positive or negative from the typical ctx.bezierCurveTo( -neg + fromx + 2*(Math.random()*diffy/8), fromy + .3*diffy, -neg + fromx + 2*(Math.random()*diffy/8), fromy + .6*diffy, tox, toy ); } ctx.beginPath(); ctx.moveTo(50,0); var i = 0; while (i < 500) { addJitteryBezier(50, i, 50, i+50); i+= 50; } ctx.stroke(); 

 <canvas id="canvas1" width="500" height="500"></canvas> 

http://jsfiddle.net/GfGVE/9/