HTML5 canvas stroke overlapping

Question

Here I create a line-path and stroke with path, but there is no overlapping with stroke which I need:

CODE and DEMO: http://jsbin.com/yepigu/12/edit?output

ctx.strokeStyle='yellowgreen';
  drawPolyline(pts);

Everything is fine but as you can see, I cant see y stroke overlapping

How I can change this example to show overlapping with stroke?

Answer 1

You can draw your red-outlined, pink-filled, blue-stroked polyline that shows the overlaps in each line segment.

The key is to draw each line segment individually instead of drawing it in a single path. Also, draw the red, pink & blue parts of the line from the thickest to the thinnest.

Here's example code and a Demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var pts=[{x:50,y:50},{x:200,y:200},{x:50,y:200},{x:200,y:50}]; ctx.lineCap='round'; ctx.lineJoin='round'; drawPolyline(pts); function drawPolyline(pts){ for(var i=1;i<pts.length;i++){ // ctx.lineWidth=25; ctx.strokeStyle='red'; ctx.beginPath(); ctx.moveTo(pts[i-1].x,pts[i-1].y); ctx.lineTo(pts[i].x,pts[i].y); ctx.stroke(); // ctx.lineWidth=22; ctx.strokeStyle='pink'; ctx.beginPath(); ctx.moveTo(pts[i-1].x,pts[i-1].y); ctx.lineTo(pts[i].x,pts[i].y); ctx.stroke(); // ctx.lineWidth=3; ctx.strokeStyle='blue'; ctx.beginPath(); ctx.moveTo(pts[i-1].x,pts[i-1].y); ctx.lineTo(pts[i].x,pts[i].y); ctx.stroke(); } } 

 body{ background-color: ivory; padding:10px; } #canvas{border:1px solid red;} 

 <canvas id="canvas" width=600 height=600></canvas>