Как добавить изображение в холст слоями?

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

Вам просто нужно создать второе изображение и поместить его соответствующим образом. Также используйте только один 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>