Luke Pacer's Blog

Here is my picture! I didn't really know what I wanted to create, but for some reason I really wanted to make mountains, so I decided to make a desert-type landscape with mountains. I also included a house, hills, trees, river and a sun. I'm not very good at coding, so I am sure I made this much harder on myself than it needed to be...but I am happy with it!

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var grdstartX = 500
var grdstartY = 10
var grdendX = 500
var grdendY = 600

//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(grdstartX, grdstartY, grdendX, grdendY);
//Yellow
grd.addColorStop(0, 'rgb(255, 255, 255)');
//white
grd.addColorStop(1, 'rgb(255, 200, 50)');
context.fillStyle = grd;
context.fill();
context.stroke();

//Mountains

context.beginPath();
context.moveTo(0,250);
context.lineTo(200,100);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(200,100);
context.lineTo(300,190);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(200,300);
context.lineTo(400,75);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(400,70);
context.lineTo(600,300);
context.lineWidth = 3
context.strokeStyle = 'brown'
context.stroke();

context.beginPath();
context.moveTo(570,270);
context.lineTo(670,200);
context.lineWidth = 3
context.strokeStyle = 'brown';
context.stroke();

context.beginPath();
context.moveTo(670,200);
context.lineTo(800,270);
context.lineWidth = 3
context.strokeStyle = 'brown';
context.stroke();

//Sun
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 3;
var centerY = canvas.height / 3;
var radius = 50;

context.beginPath();
context.arc(700, 100, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'orange';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'orange';
context.stroke();

var x1 = 0;
var y1 = 400;
var x2 = canvas.width/2;

var controlX = 200;
var controlY = 200;
var endY = canvas.height;

for (var i=0; i<canvas.width/2; i+=10){

context.beginPath();
context.moveTo(x1, y1);
context.quadraticCurveTo(controlX, controlY, i, endY);
context.strokeStyle = 'blue'
context.stroke();

}

//House

context.beginPath();
context.rect(550, 450, 600, 450);
context.fillStyle = 'gray';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(600, 600);
context.lineTo(600,525);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(600, 525);
context.lineTo(650,525);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(650, 525);
context.lineTo(650,600);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,300);
context.lineWidth = 4;
context.strokeStyle = 'black';
context.stroke();

//roof
context.beginPath();
context.moveTo(550,450);
context.lineTo(700,350);
context.lineWidth = 3
context.strokeStyle = 'black'
context.stroke();

context.beginPath();
context.moveTo(700,350);
context.lineTo(800,450);
context.lineWidth = 3
context.strokeStyle = 'black'
context.stroke();

//Tree
context.beginPath();
context.moveTo(450, 450);
context.lineTo(450, 350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500, 300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 450);
context.lineTo(450, 350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 450);
context.lineTo(450, 275);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(500,380);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,380);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(400,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(425,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(425,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(450, 350);
context.lineTo(475,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

//Tree 2

context.beginPath();
context.moveTo(50, 450);
context.lineTo(50,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(50,275);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,350);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(75,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(25,300);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,325);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(100,375);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

context.beginPath();
context.moveTo(50, 350);
context.lineTo(0,375);
context.lineWidth = 4;
context.strokeStyle = 'green';
context.stroke();

//Hills
context.beginPath();
context.moveTo(150, 310);
context.bezierCurveTo(300, 300, 300, 250, 388, 325);
context.lineWidth = 3;
// line color
context.strokeStyle = 'brown';
context.stroke();

context.beginPath();
context.moveTo(510, 320);
context.bezierCurveTo(650, 370, 500, 225, 750, 340);
context.lineWidth = 3;
// line color
context.strokeStyle = 'brown';
context.stroke();

//Sun Ray
context.beginPath();
context.moveTo(670, 50);
context.quadraticCurveTo(580, 30, 560, 10);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(650, 80);
context.quadraticCurveTo(580, 100, 560, 80);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(660, 150);
context.quadraticCurveTo(620, 150, 570, 220);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(720, 150);
context.quadraticCurveTo(700, 180, 760, 250);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(750, 120);
context.quadraticCurveTo(780, 150, 800, 140);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(730, 50);
context.quadraticCurveTo(740, 30, 800, 20);
context.lineWidth = 2;
// line color
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(700,40);
context.lineTo(710,0);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(640,110);
context.lineTo(580,140);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(690,160);
context.lineTo(680,220);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

context.beginPath();
context.moveTo(760,85);
context.lineTo(800,80);
context.lineWidth = 2
context.strokeStyle = 'orange';
context.stroke();

Luke Pacer's Blog

Tuesday, September 18, 2012

No comments:

Post a Comment

About Me