CODEWITHSUNDEEP
htmlhtml5-canvasz-index
Blooker
Blooker

Reputation: 27

Layering multiple canvases using z-index doesn't show highest layer

In HTML, I am trying to create one canvas that just displays an image with the colour black, and another canvas that displays a white border on top of the black canvas beneath it. Here's the HTML code:

<body>
<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;"
</canvas>
<canvas width=400 height=200 style="position:absolute;border:1px solid #FFFFFF;z-index:2;"
</canvas>
</body>

When I run the code in Google Chrome, I can only see the black background and no white border. What have I done wrong here? I tried searching for the problem but I didn't find an answer.

Upvotes: 0

Views: 199

Answers (2)

onTheInternet
onTheInternet

Reputation: 7253

Are you closing your canvas tags?

You have 

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;"

Try instead 

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;">

Upvotes: 1

Jack
Jack

Reputation: 9538

It's because your HTML is not well formatted.

This:

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;"

Should be this:

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;">

Upvotes: 2

Related Questions