HTML5 Canvas code: need help changing hand-drawn vertical line to horizontal -

this in reference https://stackoverflow.com/a/6373008/1247334.

overview: attempting utilize referenced html5 canvas code make both vertical, , separately, horizontal line on page fills height , width (respectively) of container.

yes, use css borders, wanting "hand drawn" these lines. yes, use graphics, trying new , seeing if it'd smaller in filesize graphical options.

from referenced link above, simon's code fiddle #16 used starting point:

• simon's code @ jsfiddle.net/gfgve/16
• my version @ codepen.io/syberknight/pen/gpgxqx

...knowing nothing of canvas code until this, can see i've been able figure out few things - notably, way have line extend (draw, not stretch) 100% of it's **container (not window).

but i've become stuck in trying make horizontal" rather vertical (actually need both).

i've tried many iterations of reversing "x" & "y" options throughout, far have ended mess @ codepen.io/syberknight/pen/bnpwko

you can use canvas transformations turn vertical line horizontal line.

context.translate reposition [0,0] origin of canvas.

context.rotate rotate new drawings specified angle.

here example code , demo:

var can = document.getelementbyid('canvas1');  var ctx = can.getcontext('2d');    var lastcontrol = 0;    function addjitterybezier(fromx, fromy, tox, toy) {    var diffx = tox - fromx;    var diffy = toy - fromy;      var neg = math.random()*diffy/5; // x value can go positive or negative typical        var cp1x = -neg + fromx + 2*(math.random()*diffy/8);    var cp2x = -neg + fromx + 2*(math.random()*diffy/8);      if (lastcontrol < fromx) { // if last control negative, make 1 positive      cp1x = fromx + fromx - cp1x;    } else {      cp1x = fromx - (cp1x - fromx);    }    lastcontrol = cp2x;      ctx.beziercurveto(      cp1x, fromy + .3*diffy,      cp2x, fromy + .6*diffy,      tox, toy    );    }    // save untranslated , unrotated context state  ctx.save();    // use translate push canvas origin down 100px  ctx.translate(0,100);    // rotate new drawings -90 degrees  ctx.rotate(-math.pi/2);    ctx.beginpath();  ctx.moveto(50,0);    var = 0;  while (i < 500) {    addjitterybezier(50, i, 50, i+50);    i+=  50;  }    ctx.stroke();    // restore context state untranslated , unrotated state  ctx.restore();

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