Group Chat Circle on Web Chat like a facebook Group Chat UI

Question

enter image description here everyone. I am trying to develop a group chat UI of my university project. But I found it hard to combine the users' profile images in one circle frame. I want to add 2 or 3 users in a circular frame if there was no group profile.I search on Google and it said me to use canvas. I try this. It doesn't work. How could I combine two or more users into one circular frame ? This is my codes.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img1 = loadImage('1.png');
var img2 = loadImage('2.png');

var imagesLoaded = 0;
function main() {
imagesLoaded += 1;

if(imagesLoaded == 2) {
    // composite now
    ctx.drawImage(img1, 0, 0);

    ctx.globalAlpha = 0.5;
    ctx.drawImage(img2, 0, 0);
}
}

function loadImage(src, onload) {

var img = new Image();

img.onload = onload;
img.src = src;

return img;
}

Answer 1

If you want to obtain with canvas you have to user globalCompositeOperation:

 var c = document.getElementById('c'); var img = new Image(); var ctx = c.getContext("2d"); img.onload = function() { ctx.drawImage(img, 0, 0, 308, 308); ctx.drawImage(img, 312, 0, 308, 308); ctx.drawImage(img, 0, 312, 308, 308); ctx.drawImage(img, 312, 312, 308, 308); } c.width= 620; c.height=620; ctx.fillStyle = "#FFFFFF"; ctx.beginPath(); ctx.arc(310,310,310,0,2*Math.PI); ctx.fill(); ctx.globalCompositeOperation='source-atop'; img.src = "http://images.movieplayer.it/images/2015/09/28/avatar-1.jpg"; 

 <canvas id ="c" ></canvas> 

Otherwise you can apply to your canvas a class with border radius:

 var c = document.getElementById('c'); var img = new Image(); var ctx = c.getContext("2d"); img.onload = function() { ctx.drawImage(img, 0, 0, 308, 308); ctx.drawImage(img, 312, 0, 308, 308); ctx.drawImage(img, 0, 312, 308, 308); ctx.drawImage(img, 312, 312, 308, 308); } c.width= 620; c.height=620; img.src = "http://images.movieplayer.it/images/2015/09/28/avatar-1.jpg"; 

 .rounded { border-radius: 310px; } 

 <canvas id ="c" class="rounded" ></canvas>