Mehrere Ebenen im Canvas mit React

Question

Ich versuche, Leinwand zu verwenden, so dass ich ein Rechteck über ein Bild bewegen kann, aber ich verstehe nicht, wie ich zwei Ebenen verwenden kann, um dies zu erreichen? Ich habe gesehen, dass man den Z-Index benutzen kann, aber das scheint nicht mit react zu funktionieren. Das Problem ist, dass das Bild und das sich bewegende Rechteck nebeneinander und nicht übereinander liegen. Wie kann ich machen, dass die Schichten übereinander liegen?

import React from 'react' 
import ReactDOM from 'react-dom' 
import './../css/index.css' 

var img; 
var ctx; 
var ctx2; 
var canvas; 
var canvas2; 
var color; 
var coordinates; 

var rectSize = { 
    color: '#666', 
    dim: { w: 20, h: 20 }, 
}; 

class App extends React.Component { 


    constructor(props){ 
     super(props) 

     window.a = this.state 
    } 

    componentDidMount(){ 
     this.SetImage(); 
    } 


    SetImage() { 
    img = new Image(); 
    img.crossOrigin = "Anonymous"; 
    img.src = testImgPath; 
    canvas = this.canvas1; 
    canvas2 = this.canvas2; 
    ctx = canvas.getContext('2d'); 
    ctx2 = canvas2.getContext('2d'); 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     img.style.display = 'none'; 
    }; 
    color = this.color1; 
    coordinates = this.coordinates1; 

    function pick(event) { 
     var x = event.layerX; 
     var y = event.layerY; 
     var pixel = ctx.getImageData(x, y, 1, 1); 
     var data = pixel.data; 
     var rgba = 'rgba(' + data[0] + ', ' + data[1] + 
       ', ' + data[2] + ', ' + (data[3]/255) + ')'; 
     var coord = '(x: ' + x + ', y: ' + y + ')'; 
     //color.style.background = rgba; 
     color.textContent = rgba; 
     coordinates.textContent = coord; 

     ctx2.clearRect(0, 0, canvas2.width, canvas2.height); 
     ctx2.fillStyle = 'red'; 
     ctx2.fillRect(x, y, rectSize.dim.w, rectSize.dim.h); 
    } 
    canvas.addEventListener('mousemove', pick);  
    } 

    render(){ 
     return (
     <div className="main-container">    
      <div styles="position:relative"> 
       <canvas id="canvas1" ref={(ref) => this.canvas1 = ref} width="500" height="500" styles="z-index: 1; position:absolute; left:0px; top:0px;"/> 
       <canvas id="canvas2" ref={(ref) => this.canvas2 = ref} width="500" height="500" styles="z-index: 2; position:absolute; left:0px; top:0px;"/> 
      </div> 

     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <App />, 
    document.querySelector('#root') 
) 

Answer 1

   <canvas id="canvas1" ref={(ref) => this.canvas1 = ref} width="500" height="500" styles="z-index: 1; position:absolute; left:0px; top:0px;"/> 

sollte

  <canvas id="canvas1" ref={(ref) => this.canvas1 = ref} width="500" height="500" style={{zIndex:1, position: absolute, top: 0, left: 0}}/>