どのように画像をキャンバスにレイヤーで追加しますか？

Question

これは私のコードです：

var c = document.getElementById("myCanvas"); 
 

 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.arc(55, 95, 30, 0, 2 * Math.PI); 
 

 
var ctx1 = c.getContext("2d"); 
 
ctx1.rect(0, 0, 200, 300); 
 
ctx.clip(); 
 
ctx.stroke(); 
 

 
var canvas = document.getElementById('myCanvas'), 
 
    context = canvas.getContext('2d'); 
 

 
make_base(); 
 

 
function make_base() { 
 
    base_image = new Image(); 
 
    base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/default=&s=80'; 
 
    base_image.onload = function() { 
 
    context.drawImage(base_image, 15, 55); 
 
    } 
 
}

canvas { 
 
    border: 1px solid #000000; 
 
    position: absolute; 
 
    top: 66px; 
 
    left: 22px; 
 
}

<canvas id="myCanvas" width="236" height="413"></canvas>

私のコードから、私がイメージを追加しようとする上で、私はもう一つを追加しようと、私はサークルに追加画像で行っているサークルや長方形 にして背景のための矩形に画像を入れますが、うまくいかないようです。

Answer 1

2つ目の画像を作成し、それに応じて配置するだけで済みます。また、1つだけcontextを使用し、複数回宣言する必要はありません。コードを変更しました。私は、これはあなたを助けることを願っています：

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.arc(55, 95, 30, 0, 2 * Math.PI); 
 
ctx.rect(18, 150, 200, 250); 
 
ctx.clip(); 
 
ctx.stroke(); 
 

 
make_base(); 
 

 
function make_base() { 
 
    base_image = new Image(); 
 
    base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80'; 
 
    base_image.onload = function() { 
 
    ctx.drawImage(base_image, 15, 55); 
 
    } 
 
    second_image = new Image(); 
 
    second_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80'; 
 
    second_image.onload = function() { 
 
    ctx.drawImage(second_image, 19, 151); 
 
    } 
 
}

<canvas id="myCanvas" width="236" height="413" style="border:1px solid #000000; position:absolute; top:66px; left:22px;"></canvas>