javascript - canvas purpose of the order of elements -

seeking canvas , try once in case. draw such thing jsfiddle.

var widthcanvas = 960; var heightcanvas = 1910; var widthwhiteline = 250;                     var starty = 0;  //shadow ctx.shadowcolor = '#111'; ctx.shadowblur = 20;    //right top stroke                     ctx.beginpath(); ctx.linewidth = widthwhiteline; ctx.shadowcolor = '#111'; ctx.shadowblur = 20; ctx.strokestyle = '#f2f2f2'; ctx.moveto( 1920 + widthwhiteline /1.5 , 0); ctx.lineto(widthcanvas - widthwhiteline /1.6, widthcanvas + widthwhiteline *1.4);                     ctx.stroke();                    //left top stroke  ctx.beginpath(); ctx.linewidth = widthwhiteline;                     ctx.strokestyle = '#f2f2f2'; ctx.moveto(-widthwhiteline /1.4 , starty); ctx.lineto(widthcanvas + widthwhiteline / 1.6, widthcanvas + widthwhiteline *1.4);                     ctx.stroke();    //left bottom stroke  ctx.beginpath();                     ctx.linewidth = widthwhiteline; ctx.strokestyle = '#f2f2f2'; ctx.moveto(-widthwhiteline /1.4, heightcanvas); ctx.lineto(widthcanvas + widthwhiteline / 1.6, widthcanvas - widthwhiteline *1.4);                     ctx.stroke(); ctx.closepath;  //right bottom stroke  ctx.beginpath();                     ctx.linewidth = widthwhiteline; ctx.strokestyle = '#f2f2f2'; ctx.moveto(1920 + widthwhiteline /1.4, heightcanvas); ctx.lineto(widthcanvas - widthwhiteline /1.6 , widthcanvas - widthwhiteline *1.4);                     ctx.stroke(); ctx.closepath; 

after drawing correct display of cross-hairs in middle, need have element of right top stroke has become higher right bottom stroke not higher left top stroke. can done using canvas?

you'll need manage layering on own. best way put draw routines functions run functions in order of bottom top. i've updated you're fiddle give idea of i'm talking about.

// pseudo code  function drawsquare() {   ... } function drawcircle() {   ... }  drawcircle(); drawsquare();