canvas Canvas z-index Is Not Working - Using position:relative;

[AARRGGHHH]

My canvas z-index is not working, the canvases are  both showing up. Canvas1 displays then canvas2 displays beneath it. 

HTML:

		<!-- Canvas locations -->
   		<div id="canvasDisplay" style="position:relative;"> 
			<canvas style="z-index:1; position:relative;" id="canvas1" width="1" height="1">Your browser is too old to support this feature. 				<br>Please consider updating to a modern browser.</canvas>
			<canvas style="z-index:2; position:relative;" id="canvas2" width="1" height="1">Your browser is too old to support this feature. 				<br>Please consider updating to a modern browser.</canvas>  
		</div>

 This displays canvas1 properly.  However, when using JavaScript to hide canvas1 behind canvas2, I get both canvases. 

JavaScript:

                cnv1.style = "z-index:2; position:relative;"
                cnv2.style = "z-index:1; position:relative;"

I'd appreciate any assistance.

Thank you 

[dsonesuk]

Check the JavaScript syntax here https://www.w3schools.com/cssref/pr_pos_z-index.asp

Hypens are never used in JavaScript for css property, they use CamelCase instead.

Edited January 10, 2018 by dsonesuk

[AARRGGHHH]

1. Actually, I checked that page on w3Schools before posting here.  That's how I arrived at the code that I used.  But it's not working.

2. I am using camelCase, for example:

canvasDisplay

But I do not know what you mean by "Hypens", so I do not know how this is causing a problem. Is this a subjective option (like global variables) or a requirement? Did you mean the hyphen in z-index? That's the code used on the page at W3Schools.  Please clarify!

Thank you very much
 

 

 

Edited January 11, 2018 by AARRGGHHH

[dsonesuk]

As stated in link the z-index (note the hyphen) for JavaScript syntax is zIndex ( note the camelCase instead of hyphen), any hyphen in css styling properties is camelCased instead,  text-align becomes textAlign, background-image becomes backgroundImage when referring to these hyphenated properties.

[Ingolme]

In Javascript it is correct to use a hyphen for a CSS property if it's inside a CSS string, but setting the style property as a CSS string is not a common way to set styles, I'm not certain if it will work properly. It would be better to set the Javascript property as such:

cnv1.style.zIndex = "2";
cnv2.style.zIndex = "1";

 

[dsonesuk]

Then you are looking to use cssText where you can use what you original posted

cnv1.style.cssText = "z-index:2; position:relative;"
cnv2.style.cssText = "z-index:1; position:relative;" 

OR

cnv1.setAttribute("style", "z-index: 2; position:relative;");
cnv2.setAttribute("style", "z-index: 1; position:relative;"); 

using .style on it own as you originally had it adjust single properties one at a time, and these must be camelCase

Edited January 11, 2018 by dsonesuk