SVG
<svg id="svg" viewBox="0 0 240 240">
<path fill="#DFEAAE" d="M 107.533,138.605 c -29.028,8.069 -98.396,19.972 -87.495,30.869 C 35.22,184.657,107.533,138.605,107.533,138.605 z"/>
<path fill="#BFDB8C" d="M108.377,138.222c-30.001,2.767-100.379,2.105-91.598,14.774
C29.013,170.643,108.377,138.222,108.377,138.222z"/>
<path fill="#92CCEF" d="M106.899,138.219c-29.919-3.546-98.615-18.853-92.666-4.634C22.521,153.394,106.899,138.219,106.899,138.219
z"/>
<line fill="none" stroke="#F9D690" stroke-width="3" stroke-miterlimit="10" x1="143.759" y1="164.411" x2="143.759" y2="198.682"/>
<line fill="none" stroke="#F9D690" stroke-width="3" stroke-miterlimit="10" x1="148.892" y1="198.682" x2="148.892" y2="164.411"/>
<path fill="#92B9E2" d="M190.309,91.615c3.472,10.215,8.335,61.291-29.171,72.042c-37.511,10.753-65.987-7.797-77.101-20.431
c-11.113-12.632,78.026-32.794,83.583-47.042C173.176,81.938,190.309,91.615,190.309,91.615z"/>
<path fill="#B1DDEB" d="M165.964,95.095c-32.053,15.909-79.767,26.99-95.427,23.864c3.283,20.097,20.274,38.579,40.338,39.713
C130.938,159.809,172.312,149.731,165.964,95.095z"/>
<polygon fill="#F9D690" points="207.562,54.056 225.541,47.595 214.305,68.663 "/>
<circle fill="#92CCEF" cx="182.494" cy="70.706" r="33.601"/>
<circle fill="#654F40" cx="187.973" cy="66.402" r="5.478"/>
<circle fill="#FFFFFF" cx="185.689" cy="64.351" r="1.443"/>
<path fill="none" stroke="#F9D690" stroke-width="3" stroke-miterlimit="10" d="M125.702,202.895
c4.213-1.965,12.358-4.494,22.473-4.213c10.111,0.28,20.051,4.213,20.051,4.213"/>
</svg>
Canvas
var $canvasElm = document.getElementById("canvas"),
$ctx = canvas.getContext("2d");
// ↓<path fill="#DFEAAE" d="M 107.533, 138.605 c -29.028, 8.069 -98.396, 19.972 -87.495, 30.869 C 35.22, 184.657, 107.533, 138.605, 107.533, 138.605 z"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(107.533, 138.605);
$ctx.bezierCurveTo(-29.028 + 107.533, 8.069 + 138.605,
-98.396 + 107.533, 19.972 + 138.605,
-87.495 + 107.533, 30.869 + 138.605);
$ctx.bezierCurveTo(35.22, 184.657,
107.533, 138.605,
107.533, 138.605);
$ctx.fillStyle = "#DFEAAE"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<path fill="#BFDB8C" d="M 108.377, 138.222 c -30.001, 2.767 -100.379,2.105 -91.598,14.774 C 29.013, 170.643, 108.377, 138.222, 108.377, 138.222 z"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(108.377, 138.222);
$ctx.bezierCurveTo(-30.001 + 108.377, 2.767 + 138.222,
-100.379 + 108.377, 2.105 + 138.222,
-91.598 + 108.377, 14.774 + 138.222);
$ctx.bezierCurveTo(29.013, 170.643,
108.377, 138.222,
108.377, 138.222);
$ctx.fillStyle = "#BFDB8C"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<path fill="#92CCEF" d="M 106.899, 138.219 c -29.919 -3.546 -98.615 -18.853 -92.666 -4.634 C 22.521, 153.394, 106.899, 138.219, 106.899, 138.219 z"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(106.899, 138.219);
$ctx.bezierCurveTo(-29.919 + 106.899, -3.546 + 138.219,
-98.615 + 106.899, -18.853 + 138.219,
-92.666 + 106.899, -4.634 + 138.219);
$ctx.bezierCurveTo(22.521, 153.394,
106.899, 138.219,
106.899, 138.219);
$ctx.fillStyle = "#92CCEF"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<line fill="none" stroke="#F9D690" stroke-width="3" stroke-miterlimit="10" x1="143.759" y1="164.411" x2="143.759" y2="198.682"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(143.759, 164.411);
$ctx.lineTo(143.759, 198.682);
$ctx.lineWidth = 3;
$ctx.strokeStyle = "#F9D690";
$ctx.stroke();
$ctx.closePath(); //図形の終わり
// ↓<line fill="none" stroke="#F9D690" stroke-width="3" stroke-miterlimit="10" x1="148.892" y1="198.682" x2="148.892" y2="164.411"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(148.892, 198.682);
$ctx.lineTo(148.892, 164.411);
$ctx.lineWidth = 3;
$ctx.strokeStyle = "#F9D690";
$ctx.stroke();
$ctx.closePath(); //図形の終わり
// ↓<path fill="#92B9E2" d="M 190.309, 91.615
// c 3.472, 10.215, 8.335, 61.291 -29.171, 72.042
// c -37.511, 10.753 -65.987 -7.797 -77.101 -20.431
// c -11.113 -12.632, 78.026 -32.794, 83.583 -47.042
// C 173.176, 81.938, 190.309, 91.615, 190.309, 91.615
// z"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(190.309, 91.615);
$ctx.bezierCurveTo(3.472 + 190.309, 10.215 + 91.615,
8.335 + 190.309, 61.291 + 91.615,
-29.171 + 190.309, 72.042 + 91.615);
$ctx.bezierCurveTo(-37.511 + -29.171 + 190.309, 10.753 + 72.042 + 91.615,
-65.987 + -29.171 + 190.309, -7.797 + 72.042 + 91.615,
-77.101 + -29.171 + 190.309, -20.431 + 72.042 + 91.615);
$ctx.bezierCurveTo(-11.113 + -77.101 + -29.171 + 190.309, -12.632 + -20.431 + 72.042 + 91.615,
78.026 + -77.101 + -29.171 + 190.309, -32.794 + -20.431 + 72.042 + 91.615,
83.583 + -77.101 + -29.171 + 190.309, -47.042 + -20.431 + 72.042 + 91.615);
$ctx.bezierCurveTo(173.176, 81.938,
190.309, 91.615,
190.309, 91.615);
$ctx.fillStyle = "#92B9E2"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<path fill="#B1DDEB" d="M 165.964, 95.095
// c -32.053, 15.909 -79.767, 26.99 -95.427, 23.864
// c 3.283, 20.097, 20.274, 38.579, 40.338, 39.713
// C 130.938, 159.809, 172.312, 149.731, 165.964, 95.095
// z"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(165.964, 95.095);
$ctx.bezierCurveTo(-32.053 + 165.964, 15.909 + 95.095,
-79.767 + 165.964, 26.99 + 95.095,
-95.427 + 165.964, 23.864 + 95.095);
$ctx.bezierCurveTo(3.283 + -95.427 + 165.964, 20.097 + 23.864 + 95.095,
20.274 + -95.427 + 165.964, 38.579 + 23.864 + 95.095,
40.338 + -95.427 + 165.964, 39.713 + 23.864 + 95.095);
$ctx.bezierCurveTo(130.938, 159.809,
172.312, 149.731,
165.964, 95.095);
$ctx.fillStyle = "#B1DDEB"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<polygon fill="#F9D690" points="207.562,54.056 225.541,47.595 214.305,68.663 "/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(207.562, 54.056);
$ctx.lineTo(225.541, 47.595);
$ctx.lineTo(214.305, 68.663);
$ctx.fillStyle = "#F9D690"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<circle fill="#92CCEF" cx="182.494" cy="70.706" r="33.601"/>
$ctx.beginPath(); //図形の始まり
$ctx.arc(182.494, 70.706, 33.601, 0, Math.PI * 2);
$ctx.fillStyle = "#92CCEF"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<circle fill="#654F40" cx="187.973" cy="66.402" r="5.478"/>
$ctx.beginPath(); //図形の始まり
$ctx.arc(187.973, 66.402, 5.478, 0, Math.PI * 2);
$ctx.fillStyle = "#654F40"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<circle fill="#FFFFFF" cx="185.689" cy="64.351" r="1.443"/>
$ctx.beginPath(); //図形の始まり
$ctx.arc(185.689, 64.351, 1.443, 0, Math.PI * 2);
$ctx.fillStyle = "#FFFFFF"
$ctx.fill();
$ctx.closePath(); //図形の終わり
// ↓<path fill="none" stroke="#F9D690" stroke-width="3" stroke-miterlimit="10" d="M 125.702, 202.895
// c 4.213 -1.965, 12.358 -4.494, 22.473 -4.213
// c 10.111, 0.28, 20.051, 4.213, 20.051, 4.213"/>
$ctx.beginPath(); //図形の始まり
$ctx.moveTo(125.702, 202.895);
$ctx.bezierCurveTo(4.213 + 125.702, -1.965 + 202.895,
12.358 + 125.702, -4.494 + 202.895,
20.051 + 125.702, -4.213 + 202.895);
$ctx.bezierCurveTo(10.111 + 20.051 + 125.702, 0.28 + -4.213 + 202.895,
20.051 + 20.051 + 125.702, 4.213 + -4.213 + 202.895,
20.051 + 20.051 + 125.702, 4.213 + -4.213 + 202.895);
$ctx.lineWidth = 3;
$ctx.strokeStyle = "#F9D690";
$ctx.stroke();
$ctx.closePath(); //図形の終わり