How I Got There:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start here
// SKY
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = "skyblue";
context.fill();
context.closePath();
// DIRT
context.beginPath();
context.rect(0,220,800,380);
context.fillStyle = "rgb(196,149,115)";
context.fill();
context.closePath();
// GRASS
context.beginPath();
context.moveTo(0,460);
context.bezierCurveTo(50,600,200,430,250,460);
context.bezierCurveTo(300,580,520,420,500,460);
context.bezierCurveTo(470,600,650,490,670,460);
context.bezierCurveTo(700,580,780,490,800,460);
context.lineTo(800,600);
context.lineTo(0,600);
context.lineTo(0,460);
context.stroke();
context.fillStyle = "rgb(15,150,16)";
context.fill();
context.closePath();
//SUN
context.beginPath();
context.arc(50,0,120,3.15,0,true);
context.fillStyle="rgb(255,198,30)";
context.fill();
context.closePath();
//SUN LAYER ONE
context.beginPath();
context.arc(50,0,108,3.15,0,true);
context.fillStyle="rgb(252,217,29)";
context.fill();
context.closePath();
//SUN LAYER TWO
context.beginPath();
context.arc(50,0,75,3.15,0,true);
context.fillStyle="rgb(255,203,42)";
context.fill();
context.closePath();
// PANDA ONE HEAD
context.beginPath();
context.arc(175,200,75,1,3.15, true);
context.fillStyle = "white";
context.fill();
context.closePath();
context.beginPath();
// PANDA ONE LEFT EAR
context.beginPath();
context.arc(120,150,10,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA ONE RIGHT EAR
context.beginPath();
context.arc(100,200,10,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA ONE BODY
context.beginPath();
context.arc(200,200,75,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA ONE WHITE TAIL
context.beginPath();
context.arc(250,200,15,3,3.15, true);
context.fillStyle = "white";
context.fill();
context.closePath();
// PANDA TWO BODY
context.beginPath();
context.arc(500,200,75,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO LEFT EAR
context.beginPath();
context.arc(450,75,20,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO RIGHT EAR
context.beginPath();
context.arc(550,75,20,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO HEAD
context.beginPath();
context.arc(500,100,50,3,3.15, true);
context.fillStyle = "white";
context.fill();
context.closePath();
// PANDA TWO LEFT EYE BLACK
context.beginPath();
context.arc(480,100,20,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO RIGHT EYE BLACK
context.beginPath();
context.arc(519,100,20,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO LEFT EYE WHITE
context.beginPath();
context.arc(480,100,10,3,3.15, true);
context.fillStyle = "white";
context.fill();
context.closePath();
// PANDA TWO RIGHT EYE WHITE
context.beginPath();
context.arc(519,100,10,3,3.15, true);
context.fillStyle = "white";
context.fill();
context.closePath();
// PANDA TWO LEFT EYEBALL
context.beginPath();
context.arc(470,100,7,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO RIGHT EYEBALL
context.beginPath();
context.arc(513,100,7,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO MOUTH
context.beginPath();
context.arc(500,120,9,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO LEFT ARM
context.beginPath();
context.arc(440,150,20,6.28,1.67, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO RIGHT ARM
context.beginPath();
context.arc(560,150,20,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO INSIDE LEFT ARM
context.beginPath();
context.arc(440,150,10,3,3.15, true);
context.fillStyle = "pink";
context.fill();
context.closePath();
// PANDA TWO INSIDE RIGHT ARM
context.beginPath();
context.arc(560,150,10,3,3.15, true);
context.fillStyle = "pink";
context.fill();
context.closePath();
// PANDA TWO WHITE BELLY
context.beginPath();
context.arc(500,200,35,3,3.15, true);
context.fillStyle = "white";
context.fill();
context.closePath();
// PANDA TWO LEFT FOOT
context.beginPath();
context.arc(440,200,30,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO RIGHT FOOT
context.beginPath();
context.arc(560,200,30,3,3.15, true);
context.fillStyle = "black";
context.fill();
context.closePath();
// PANDA TWO INSIDE LEFT FOOT
context.beginPath();
context.arc(440,200,20,3,3.15, true);
context.fillStyle = "pink";
context.fill();
context.closePath();
// PANDA TWO INSIDE RIGHT FOOT
context.beginPath();
context.arc(560,200,20,3,3.15, true);
context.fillStyle = "pink";
context.fill();
context.closePath();
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment