JavaScript
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.style.background = "rgba(110,110,255,255)";
ctx.fillStyle = "white";
ctx.fillRect(0, 360, canvas.width, canvas.height-360);
//bottom ball
ctx.beginPath();
ctx.arc(250,300,70,0,2*Math.PI);
ctx.fill();
//centre ball
ctx.beginPath();
ctx.arc(250,220,55,0,2*Math.PI);
ctx.fill();
//top ball
ctx.beginPath();
ctx.arc(250,150,40,0,2*Math.PI);
ctx.fill();
//2 eye
ctx.beginPath();
ctx.fillStyle ="black";
ctx.arc(265,135,5,0,2*Math.PI);//right eye
ctx.arc(235,135,5,0,2*Math.PI);//left eye
ctx.fill();
//button 3
ctx.beginPath();
ctx.fillStyle ="black";
ctx.arc(250,190,5,0,2*Math.PI);
ctx.arc(250,240,5,0,2*Math.PI);
ctx.arc(250,290,5,0,2*Math.PI);
ctx.fill();
//nose
ctx.beginPath();
ctx.fillStyle ="orange";
ctx.moveTo(250,145);
ctx.lineTo(265,150);
ctx.lineTo(250,155);
ctx.closePath();
ctx.fill();
//mouth
ctx.beginPath();
ctx.fillStyle ="red";
ctx.arc(250,160,10,0,Math.PI,false);
ctx.fill();
//hat
ctx.beginPath();
ctx.fillStyle ="black";
ctx.fillRect(200,110,100,10);
ctx.arc(250,110,30,Math.PI,0,false);
ctx.fill();
//hand
ctx.beginPath();
ctx.strokeStyle = "brown";
ctx.moveTo(260,210);
ctx.lineTo(360,230);
ctx.lineTo(370,250);
ctx.moveTo(360,230);
ctx.lineTo(370,220);
ctx.moveTo(360,230);
ctx.lineTo(375,230);
//left
ctx.moveTo(220,210);
ctx.lineTo(90,250);
ctx.lineTo(80,260);
ctx.moveTo(90,250);
ctx.lineTo(75,230);
ctx.stroke();