<body onload="draw();">
<canvas id="drawing" width="300" height="500"></canvas>
</body>
xxxxxxxxxx
#drawing{
border: 1px solid black;
background-color: #ADD8E6;
display: block;
margin: 0 auto;
}
xxxxxxxxxx
var canvas = document.getElementById('drawing');
function shadow(ctx){
ctx.beginPath(); // shadow blue
ctx.fillStyle = 'SkyBlue';
ctx.ellipse(150, 360, 76, 76, Math.PI * 1.6, 0, Math.PI * .8);
ctx.fill();
ctx.closePath();
ctx.beginPath(); //shadow
ctx.fillStyle = '#ADD8E6';
ctx.moveTo(150,450);
ctx.quadraticCurveTo(270, 360 , 150, 270);
ctx.fill();
ctx.closePath();
}
function shadow2(ctx){
ctx.beginPath(); // shadow blue 2
ctx.fillStyle = 'SkyBlue';
ctx.ellipse(150, 230, 46, 46, Math.PI * 1.6, 0, Math.PI * .8);
ctx.fill();
ctx.closePath();
ctx.beginPath(); //shadow 2
ctx.fillStyle = '#ADD8E6';
ctx.moveTo(150,280);
ctx.quadraticCurveTo(220, 230, 150, 170);
ctx.fill();
ctx.closePath();
}
function body1(ctx){
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineCap="round";
ctx.lineWidth = 8;
ctx.arc(150, 360, 80, (Math.PI)*1.75, (Math.PI)*1.25 );
ctx.stroke();
ctx.closePath();
}
function body2(ctx){
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineCap="round";
ctx.lineWidth = 8;
ctx.arc(150, 230, 50, (Math.PI)*1.75, (Math.PI)*1.25 );
ctx.stroke();
ctx.closePath();
}
function hat(ctx){
ctx.strokeStyle = 'black';
ctx.fillStyle = "DimGrey";
ctx.fillRect(122,152,60,30);
ctx.strokeRect(120,150,60,30);
}
function hatdot(ctx){
ctx.beginPath();
ctx.lineCap="round";
ctx.lineWidth = 8;
ctx.moveTo(100,181);
ctx.lineTo(200,181);
ctx.stroke();
ctx.closePath();
}
function smile(ctx){
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineCap="round";
ctx.lineWidth = 8;
ctx.arc(150, 210, 50, (Math.PI)*0.35, (Math.PI)*0.65 );
ctx.stroke();
ctx.closePath();
}
function dot(ctx){
ctx.beginPath();
ctx.strokeStyle = 'black';
ctx.lineCap="round";
ctx.arc(175, 220, 10, 0, 2 * Math.PI);
ctx.moveTo(150, 320);
ctx.arc(125, 220, 10, 0, 2 * Math.PI);
ctx.moveTo(175, 220);
for(var i = 0; i<3;i++){
ctx.arc(150, 320+40*i, 10, 0, 2 * Math.PI);
ctx.moveTo(150, 360);
}
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
}
function hands(ctx){
ctx.beginPath();
ctx.lineCap="round";
ctx.lineWidth = 8;
ctx.moveTo(105-40,290-18); // left hand2
ctx.lineTo(30+5,260-25);
ctx.moveTo(105,290); // left hand
ctx.lineTo(30,260);
ctx.moveTo(195+40,290-18); // right hand
ctx.lineTo(270-5,260-25);
ctx.moveTo(195,290); // right hand2
ctx.lineTo(270,260);
ctx.stroke();
ctx.closePath();
}
function text(ctx){
ctx.lineWidth = 1.5;
ctx.strokeStyle = "blue";
ctx.font = '38px ROBOTO';
ctx.textBaseline = 'midle';
ctx.fillText('Happy New Year', 20, 60);
}
if (canvas.getContext){
var ctx = canvas.getContext('2d');
shadow(ctx);
shadow2(ctx);
body1(ctx);
body2(ctx);
hat(ctx);
hatdot(ctx);
dot(ctx);
smile(ctx);
hands(ctx);
text(ctx);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.