My student’s scene consists of an image and a drawing being done by the turtle. The problem is that the turtle drawing always appears behind the image. I’ve tried setting the image to the lowest depth but it doesn’t seem to matter. How can I change the order of these elements?
I think the only way to do this is to make the image a background image of the screen.
Amazing, even when I draw the image followed by a line in a canvas, JS always puts the image in front of the line.
The turtle canvas is always set to a z-index of -1, which is why even when you move a design element down to the bottom depth (z-index of 0) it shows up in front of canvas or turtle drawn elements. @bhatnagars’ approach is the right way to go, though if you want to get really crafty you could use the advanced command setStyle() to change the z-index of the turtle canvas as follows:
setStyle("turtleCanvas", "z-index: 10");
or alternatively, you could move the z-index of your image below -1
setStyle("image1", "z-index: -2");
Here’s example of both https://studio.code.org/projects/applab/aV9HRrbOjLXQyjIsM9g5aw/edit
1 Like
One of the problems is that the image may need to shift and my student is not into photo editing. I’d have to shift the image every time his idea changed.
Thanks a ton.