So I was working with an array of ImageSurface that after doing a shuffle procedure, once displayed, the images of the ImageSurface overlapped incorrectly.
I mean, when I created each ImageSurface at startup and added them to the view, it displayed correctly, overlapping each other sequentially in the correct manner.
However, once that shuffle procedure happened the overlapping got messed up. I did not understand what was happening until I came across a post in the StackOverflow forum that said when you instantiate an ImageSurface, regardless if you had not added it to the context or view, it is automatically added in the rendering tree.
So if you do this:
JavaScript
1
2
surface2=newSurface();
surface1=newSurface();
And add these ImageSurface objects to a view like this:
JavaScript
1
2
3
view=newView();
view.add(surface1);
view.add(surface2);
The surface2 object will always be below surface1. So since my case had to do with shuffling the ImageSurface, the solution was to call the setOptions() method and set its z-index order like this:
JavaScript
1
2
surface1.setOptions({properties:{zIndex:1}});
surface2.setOptions({properties:{zIndex:2}});
In this example, surface2 will then always be on top of surface1.
