キャンバスの形状を常に他の形状の上に表示する

Question

キャンバスに2つの移動する長方形があり、1つは緑色で、もう1つは赤色です。それらが同じ位置にあり、それらのうちの1つしか見ることができない場合、赤色の四角形は常に表示され、緑色の四角形は常に赤色の下に表示されます。

緑色のものが常に上に表示されるようにするにはどうすればよいですか？

Answer 1

を繰り返すことができますが、最初の緑色の四角形のコードを持っている場合それが最初に描かれ、赤がその上に描画されます。

Answer 2

私はあなたが赤いものの後に緑色のものを描くべきだと思います。あなたの長方形が配列している場合ので、あなたは逆の順序で、その上、伝えるのは難しいです任意のコードなし

(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>