Afficher la forme de la toile toujours au-dessus d'une autre forme

Question

J'ai deux rectangles mobiles dans ma toile, l'un est vert et l'autre est rouge. Quand ils sont sur la même position et que vous ne pouvez en voir qu'un seul, le rectangle rouge est toujours affiché tandis que le vert est simplement sous le rouge.

Comment puis-je accomplir que le vert est toujours affiché sur le dessus?

Answer 1

sans code, il est difficile de dire, mais si vous avez le code pour le rectangle vert d'abord il sera dessiné en premier et le rouge sera dessiné dessus.

Answer 2

Je pense que vous devriez peindre le vert après le rouge. donc si vos rectangles sont dans un tableau, vous pouvez itérer sur elle dans l'ordre inverse

(function start() { 
 
    const canvas = document.getElementById('canvas'); 
 
    canvas.width = window.innerWidth || $(window).width(); 
 
    canvas.height = window.innerHeight || $(window).height(); 
 
    const ctx = canvas.getContext('2d'); 
 

 
    const draw = function(opts={color: 'yellow', x: 0, y: 0}) { 
 
    ctx.beginPath(); 
 
    ctx.rect(opts.x, opts.y, 150, 100); 
 
    ctx.fillStyle = opts.color; 
 
    ctx.fill(); 
 
    } 
 

 
    // COLUMN 1 
 
    draw({color: 'red',x: 20,y: 20}); 
 
    draw({color: 'green',x: 40,y: 40}); 
 
    
 
    // COLUMN 2 
 
    draw({color: 'green', x: 200, y: 20}); 
 
    draw({color: 'red', x: 220, y: 40}); 
 
})();

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #000; 
 
} 
 

 
canvas { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id='canvas'></canvas>