For this project I decided to make a golf scene. In this scene
a golf ball just landed and the golfer just watched the ball land. There is a
golf cart in the scene because the golfer is lazy and needed to ride the cart. In
this process, I drew out what I wanted the scene to look like. I ended up
switching around the scene a little. Originally I had the golfer at the bottom
of the hill and then flag at the top and the ball was flying through the air. I
also started from the grass at the bottom of the scene and then worked my way
up to the sky. Then I drew everything that went on top of the sky and road/
grass area. This piece consists of a lot of rectangles and lines. My piece is
successful because I think it shows what I love to do. Also, it tells a story of what a golfer does regularly. FORE!
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//sky
context.beginPath
context.moveTo(0,400);
context.lineTo(0,0);
context.lineTo(800,0);
context.lineTo(800,275);
context.lineTo(600,275);
context.bezierCurveTo(155, 374, 530, 300, 150, 400);
context.lineTo(0,400);
context.strokeStyle = 'rgb(0,150,200)';
context.fillStyle = 'rgb(0,150,200)';
context.fill();
context.stroke();
//cloud right
context.beginPath();
context.moveTo(470, 80);
context.bezierCurveTo(450, 90, 450, 90, 490, 89);
context.bezierCurveTo(550, 100, 470, 130, 575, 105);
context.bezierCurveTo(590, 120, 610, 115, 610, 100);
context.bezierCurveTo(590, 70, 450, 75, 600, 110);
context.bezierCurveTo(590, 80, 450, 65, 470, 80);
context.closePath();
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//cloud left
context.beginPath();
context.moveTo(280,80);
context.quadraticCurveTo(230, 100, 280, 115);
context.quadraticCurveTo(300, 150, 310, 120);
context.quadraticCurveTo(360, 95, 310, 90);
context.quadraticCurveTo(310, 50, 280, 80);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//sun
context.beginPath();
context.arc(75, 60, 50, 0 , 2 * Math.PI, false);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'yellow';
context.stroke();
//flag
context.beginPath();
context.moveTo(50, 400);
context.lineTo(50, 325);
context.lineTo(60, 350);
context.strokeStyle = 'rgb(200, 25, 0)';
context.stroke();
//golf ball
context.beginPath();
context.arc(100, 391, 3, 0 , 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'white';
context.stroke();
//person
context.beginPath();
//body
context.moveTo(700, 225);
context.lineTo(700, 260);
//legs
context.moveTo(700, 260);
context.lineTo(685, 275);
context.moveTo(700, 260);
context.lineTo(715, 275);
//arms
context.moveTo(700, 241);
context.lineTo(685, 235);
context.moveTo(700, 241);
context.lineTo(715, 235);
context.strokeStyle = 'tan';
context.stroke();
//head
context.beginPath();
context.arc(700, 215, 10, 0 , 2 * Math.PI, false);
context.fillStyle = 'tan';
context.fill();
context.strokeStyle = 'tan';
context.stroke();
//green
context.beginPath();
context.moveTo(0,400);
context.lineTo(150,400);
context.bezierCurveTo(250, 350, 500, 300, 600, 275);
context.lineTo(800,275);
context.lineTo(800,450);
context.lineTo(0,450);
context.lineTo(0,400);
context.strokeStyle = 'green';
context.fillStyle = 'green';
context.fill();
context.stroke();
//grass bottom
context.beginPath();
context.rect(0, 540, canvas.width, canvas.height);
context.strokeStyle = 'green';
context.fillStyle = 'green';
context.fill();
context.stroke();
//road
context.beginPath();
context.rect(0, 450, 800, 90);
context.fillStyle = 'black';
context.fill();
context.stroke();
//golf cart
context.beginPath();
context.moveTo(550, 400);
context.lineTo(550, 475);
context.rect(530, 395, 150, 5);
context.moveTo(640, 400);
context.lineTo(640, 475);
context.rect(520, 475, 175, 23);
context.moveTo(550, 475);
context.lineTo(575, 450);
context.moveTo(579, 457);
context.lineTo(574, 440);
context.strokeStyle = 'white';
context.fillStyle = 'white';
context.fill();
context.stroke();
//wheel left
context.beginPath();
context.arc(550, 500, 15, 0 , 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//wheel right
context.beginPath();
context.arc(650, 500, 15, 0 , 2 * Math.PI, false);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
