Как добавить индекс z в canvas.drawImage в js (я хочу отображать myImages всегда вверху)

Question

Можно ли добавить индекс z в drawImage в javaScript ??? если добавить, можете ли вы объяснить?

function drawCanvas(time, myClass, myImages, context) { 
    drawImageWithCenter(myClass.bgImage, 512, 384); 
    var indx; 
    for (indx=0; indx < 5; indx++){ 
     if(a[indx] == false){ 
      drawImageWithCenter(
       myClass.rightImage, tickX[indx], tickY[indx]); 
     } 
    } 
    for (indx=0; indx < myImages.length; indx++) 
    { 
     if(myImages[indx].isVisible){ 
      drawImageWithCenter(myImages[indx].img[myImages[indx].currentFrame],myImages[indx].imgX,myImages[indx].imgY); 
     } 
    } 

    if(spoted==5 && B_end==true){ 
     drawImageWithCenter(myClass.endPopup, 512, 384); 
    } 
    context.font = "30px Gill Sans"; 
    drawCenterText("Spot the 5 differences in the pictures on the right...", 150, 80); 
    drawCenterText("Score: " + spoted, 30, 50); 
} 

Answer 1

1) Используйте несколько элементов холста, по одному для каждого слоя, который вам нужен.
2) Установите zIndex, подходящий для каждого холста.

<yourCanvasElement>.style.zIndex = 5; 

See this as a reference

Answer 2

Я считаю, что это не понятие г-индекса в полотне. Объекты, которые вычерчены позже в коде, перегружают все, что было нарисовано ранее.

Если вам нужно управлять z-index, вы должны управлять этим в своем коде. Например, вы можете хранить изображения в массиве объектов, и каждый элемент будет иметь собственное свойство z-index. Прежде чем рисовать изображения в цикле, просто отсортируйте массив по его z-индексу.