image processing - canvas (about) 5px line -- add bevel effect to make it 3D -- any ideas? (Sample of desired final effect included) -

image processing - canvas (about) 5px line -- add bevel effect to make it 3D -- any ideas? (Sample of desired final effect included) -

i want draw (for instance) line on html5 canvas. want add together image bevel effect line. looks 3d, piece of string sitting on canvas. has seen image processing effect can along line?

i think way kind of drawing draw step step curve, , apply @ each step texture perpendicular local tangent.

but seem want feature : able 'twist' texture depending on part of curve. here there mant options parameterize can't guess how you'll store/interpolate twist of texture. below had texture 'turn' t, parameter of bezier curve.

http://jsfiddle.net/gamealchemist/ypkv9/

example : image showing texture applied curve, , below same curve same texture turns along curve.

// ---------------------------------------------- // draw bezier curve filled // txcv used perpendicular texture // signature : drawtexturedbezier ( txcv, a, b, c, d, twisted ) // a,b,c,d command points, twisted means // have twist curve. // width of bezier == txcv.width/2 // when draw resolution tx.height (lower = nicer+slower, 3 seems fine ) // ---------------------------------------------- function drawtexturedbezier() { // build onnly 1 time local vars var pt = { x: 0, y: 0 }; var tg = { x: 0, y: 0 }; var lastpt = { x: 0, y: 0 }; drawtexturedbezier = function (txcv, a, b, c, d, twisted) { var lineheight = txcv.height; var t = 0; var incr = 1 / 1000; var pointcount = 0; pt.x = a.x; pt.y = a.y; var thiscoordsfort = coordsfort.bind(null, a, b, c, d); var thistgtfort = tangentfort.bind(null, a, b, c, d); // scan bezier curve increment of lineheight distance // on curve. { // update lastly point lastpt.x = pt.x; lastpt.y = pt.y; // seek next point far plenty previous point // compute 1 point ahead // using average estimate t of '1 point ahead' thiscoordsfort(t + incr, pt); var dx = pt.x - lastpt.x; dx *= dx; var dy = pt.y - lastpt.y; dy *= dy; // compute distance previous point var dist = math.sqrt(dx + dy); // compute required t increment // considering curve locally linear // 0.92 compensates error. var tincrement = 0.92 * incr * (lineheight / dist); t += tincrement; // compute point thiscoordsfort(t, pt); pointcount++; // update regular increment local 1 incr = 0.2 * incr + 0.8 * tincrement; // compute tangent current point thistgtfort(t, tg); // draw perpendicular texture drawtexturedline(txcv, pt, tg, t, twisted); } while (t < 1); }; homecoming drawtexturedbezier.apply(this, arguments); }

with

// draws rect centered on pt, curve having tg local tangent // having size of : txcv.width/2 x txcv.height // using txcv horizontal pattern pattern. function drawtexturedline(txcv, pt, tg, t, twisted) { var linewidth = txcv.width / 2; var lineheight = txcv.height; context.save(); context.beginpath(); context.linewidth = 2; context.translate(pt.x, pt.y); context.rotate(math.pi + math.atan2(-tg.x, tg.y)); var twistfactor = 0; if (twisted) { twistfactor = (2 * t + animating * date.now() / 2000) % 1; } context.drawimage(txcv, twistfactor * linewidth, 0, linewidth, lineheight, -0.5 * linewidth, -0.5 * lineheight, linewidth, lineheight); context.restore(); }

image-processing canvas bevelled