<canvas width="300" height="370" id="plano"></canvas>

canvas {
  display: block;
  margin: 0 auto;
 }

var cenxs = 50; var cenys = 50;
var cenxi = 50; var cenyi = 320;
var cenxl = 240; var cenyl = 185;
var cenxp = 25; var cenyp = 185;

var rm = 50; var rM = 60; var rp = 18.5;

var verde = "#33D374"; var azul = "#108EFF";

const p = Math.PI; const inc = 35.4/180*p; 

circulo(cenxs,cenys,rm,verde);
circulo(cenxi,cenyi,rm,azul);
circulo(cenxp,cenyp,rp,verde);
circulo(cenxl,cenyl,rM,verde);

tangentes(cenxi,cenyi,rm,cenxl,cenyl,rM,-inc,azul);
tangentes(cenxs,cenys,rm,cenxl,cenyl,rM,inc,verde);

function circulo(centrox, centroy, radio, color) {
  $('canvas').drawArc({
    strokeStyle: color,
    x: centrox, y: centroy,
    radius: radio,
  });
}

function poligono(x1, x2, x3, x4, y1, y2, y3, y4, color) {
  $('canvas').drawPath({
    strokeStyle: color,
    p1: {
      type: 'line',
      x1: x1, y1: y1,
      x2: x2, y2: y2,
      x3: x3, y3: y3,
      x4: x4, y4: y4,
      x5: x1, y5: y1,
    }
  });
}

function tangentes(cenx1, ceny1, r1, cenx2, ceny2, r2, offset, color) {
    let x1t = cenx1+r1*Math.cos(p/2+offset);
    let y1t = ceny1+r1*Math.sin(p/2+offset);
    let x2t = cenx2+r2*Math.cos(p/2+offset);
    let y2t = ceny2+r2*Math.sin(p/2+offset);
    let x3t = cenx2+r2*Math.cos(3*p/2+offset);
    let y3t = ceny2+r2*Math.sin(3*p/2+offset);
    let x4t = cenx1+r1*Math.cos(3*p/2+offset);
    let y4t = ceny1+r1*Math.sin(3*p/2+offset);  
    poligono(x1t, x2t, x3t, x4t, y1t, y2t, y3t, y4t, color); 
}