<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> smiley face </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
// HEAD
context.beginPath();
context.arc(300,225,100,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(300,150,50,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
//ANTLERS
context.beginPath();
context.moveTo(250,75);
context.lineTo(300,150);
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(350,75);
context.lineTo(300,150);
context.stroke();
context.closePath();
// BODY
context.beginPath();
context.arc(300,400,200,0,2*Math.PI,false);
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = "red";
context.fill();
context.stroke();
context.closePath();
// LEFT EYE
context.beginPath();
context.arc(275,120,10,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(275,120,5,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
// RIGHT EYE
context.beginPath();
context.arc(315,120,10,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(315,120,5,0,2*Math.PI,false);
context.fillStyle = "white";
context.fill();
// LINE
context.beginPath();
context.moveTo(300,200);
context.lineTo(300,600);
context.stroke();
context.closePath();
// DOTS
context.beginPath();
context.arc(430,500,30,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(215,500,30,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(200,375,30,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(450,400,30,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(250,275,30,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(400,275,30,0,2*Math.PI,false);
context.fillStyle = "black";
context.fill();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
.JPG)
