<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";

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

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