canvas

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

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(100, 190, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(190, 100, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(190, 190, 50, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = "white";
ctx.beginPath();
ctx.rect(50, 105, 40, 6);
ctx.fill();

ctx.fillStyle = "white";
ctx.beginPath();
ctx.rect(210, 180, 40, 5);
ctx.fill();

ctx.fillStyle = 'rgb(2, 167, 233)';
ctx.beginPath();
ctx.arc(100, 100, 33, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = 'rgb(237, 22, 56)';
ctx.beginPath();
ctx.arc(100, 190, 33, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = 'rgb(254, 231, 3)';
ctx.beginPath();
ctx.arc(190, 100, 33, 0, 2 * Math.PI);
ctx.fill();

ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(190, 190, 33, 0, 2 * Math.PI);
ctx.fill();

/*ctx.fillStyle = "black";
ctx.beginPath();
ctx.rect(60, 92, 55, 13);
ctx.fill();*/

ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(60, 105);
ctx.lineTo(105, 105);
ctx.lineTo(115, 90);
ctx.lineTo(60, 90);
ctx.fill();

ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(83, 184);
ctx.lineTo(103, 184);
ctx.lineTo(150, 240);
ctx.lineTo(130, 240);
ctx.fill();

ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(225, 185);
ctx.lineTo(190, 185);
ctx.lineTo(180, 200);
ctx.lineTo(225, 200);
ctx.fill();

ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(140, 52);
ctx.lineTo(160, 52);
ctx.lineTo(200, 106);
ctx.lineTo(180, 106);
ctx.fill();

ctx.save();
ctx.beginPath();
ctx.fillStyle = "black";
ctx.rotate(34 * Math.PI / 180);
ctx.fillRect(180, 15, 44, 45);
ctx.restore();