-1
Si je mets en div quelques objets Canvas, ils en ordonnent un autre. Mais pas un sur l'autre. Seul le navigateur Chrome fonctionne comme je veux.Les objets ne sont pas classés par z-index
Où est l'erreur?
window.onload = function() {
var div = document.createElement("div")
div.style = "position: relative; height:100%; width:100%;"
document.body.appendChild(div)
var element = document.createElement('canvas');
element.width = 800;
element.height = 300;
element.style = "position: absolute; left: 0; top: 0; z-index: 0;"
var cvs = element.getContext('2d');
cvs.fillStyle = 'rgba(200, 200, 200, 155)';
cvs.fillRect(0, 0, 800, 300);
div.appendChild(element);
element = document.createElement('canvas');
element.width = 800;
element.height = 300;
element.style = "position: absolute; left: 0; top: 0; z-index: 1;"
cvs = element.getContext('2d');
cvs.fillStyle = 'rgba(0, 255, 0, 155)';
cvs.fillRect(100, 50, 600, 200);
div.appendChild(element);
}<body bgcolor="#ffffff" style="height:100%; overflow:hidden; margin:0;">
<div id="sample" style="position: relative; height:100%; width:100%;"></div>
</body>Le comportement attendu (uniquement par Chrome) 
Le comportement observé (IE, Edge, navigateurs Android natifs) 