canvas purpose of the order of elements

Question

Seeking a canvas and try once in the case. I draw such a 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 for the correct display of the cross-hairs in the middle, I need to have an element of that right top stroke has become higher than the right bottom stroke but not higher than the left top stroke. This can be done using the canvas?

[are you after the equivalent of "z-index"?](http://stackoverflow.com/q/9165766/2476755) — royhowie, Jul 21 '15 at 06:40
Thanks. However, I do not see how you can configure one item differently to the other two . Maybe prompt as in my case I use it? — user3664874, Jul 21 '15 at 06:55
Html Canvas does not allow changing of any of its drawings. When working with Canvas the pattern is to completely erase the canvas and redraw in the newly desired order (z-index in your case). To start, put each of your stroke-paths into separate functions. When changes are required, erase the canvas and call the stroke-path functions in their newly desired order. BTW, nice visual design in your fiddle :-) — markE, Jul 21 '15 at 20:19
markE, thanks. ohh . Kettle boils . everything seems to be understood , to be trained. but particularly in this job I can not understand how one element set two different properties http://jsfiddle.net/rewuxiin/ydxe8xmd/8/ — user3664874, Jul 22 '15 at 13:33

score 0 · Answer 1 · answered Jul 23 '15 at 04:13

0

You'll need to manage the layering on your own. The best way to do that is to put your draw routines into functions then run the functions in order of bottom to top. I've updated you're fiddle to give you an idea of what I'm talking about.

// pseudo code

function drawSquare() {
  ...
}
function drawCircle() {
  ...
}

drawCircle();
drawSquare();

answered Jul 23 '15 at 04:13

wolfhammer

2,641
1
12
11

http://jsfiddle.net/rewuxiin/ydxe8xmd/8/ function I have already done . matter in what order and with what they call the globalCompositeOperation – user3664874 Jul 23 '15 at 06:00

canvas purpose of the order of elements

1 Answers1