5 logos

HTML5 Project 1

I made a house in the fall time, because one of my favorite seasons back in New York is fall. I used an orange sky to give it that halloween/ fall feeling to it, since the main color of fall is orange.

context.beginPath();

context.rect(0, 0, 800, 600);

context.fillStyle = 'rgb(225, 102, 30)';

context.fill();

context.beginPath();

context.rect(0, 400, 800, 800);

context.fillStyle = 'rgb(10, 50, 10)';

context.fill();

context.beginPath();

context.arc(100, 100, 60, 0, 2*Math.PI, false);

var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);

grd.addColorStop(0, 'red');

grd.addColorStop(1, 'gold');

context.fillStyle = grd;

context.fill();

context.beginPath();

context.rect(598, 200, 170, 200);

context.fillStyle = 'rgb(190, 255, 220)';

context.fill();

context.beginPath();

context.moveTo(800, 200);

context.lineTo(550, 200);

context.lineTo(675, 50);

context.lineTo(805, 200);

context.strokeStyle = 'gray';

context.fillStyle = 'black';

context.fill();

context.stroke();

context.beginPath();

context.rect(650, 300, 50, 100);

context.fillStyle = 'rgb(50, 30, 20)';

context.fill();

context.beginPath();

context.arc(690, 350, 5, 0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.rect(620, 225, 30, 50);

context.fillStyle = 'rgb(240, 250, 10)';

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = 'black';

context.stroke();

context.beginPath();

context.rect(720, 225, 30, 50);

context.fillStyle = 'rgb(240, 250, 10)';

context.fill();

context.lineWidth = 1.5;

context.strokeStyle = 'black';

context.stroke();

//path

context.beginPath();

context.rect(630, 400, 100, 200);

context.fillStyle = 'rgb(35, 35, 35)';

context.fill();

context.beginPath();

context.moveTo(630, 497);

context.lineTo(730, 497);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 400);

context.lineTo(730, 400);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 595);

context.lineTo(730, 595);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 450);

context.lineTo(730, 450);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

context.beginPath();

context.moveTo(630, 545);

context.lineTo(730, 545);

context.lineWidth = .7;

context.strokeStyle = 'gray';

context.stroke();

//tree

context.beginPath();

context.moveTo(100, 270);

context.quadraticCurveTo(200, 430, 100, 580);

context.lineTo(240, 580);

context.quadraticCurveTo(190, 500, 240, 400);

context.lineWidth = 6;

context.strokeStyle = 'rgb(55, 35, 20)';

context.fillStyle = 'rgb(55, 35, 20)';

context.fill();

context.stroke();

//part of tree

context.beginPath();

context.moveTo(80, 420);

context.quadraticCurveTo(130, 490, 190, 415);

context.quadraticCurveTo(270, 490, 340, 396);

context.quadraticCurveTo(420, 370, 350, 300);

context.quadraticCurveTo(380, 210, 280, 210);

context.quadraticCurveTo(230, 150, 170, 190);

context.quadraticCurveTo(120, 160, 90, 200);

context.quadraticCurveTo(30, 190, 40, 260);

context.quadraticCurveTo(10, 305, 60, 340);

context.quadraticCurveTo(30, 395, 80, 420);

context.fillStyle = 'rgb(10, 100, 30)';

context.fill();

//fence

context.beginPath();

context.moveTo(0, 495);

context.lineTo(800, 495);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.stroke();

context.beginPath();

context.moveTo(0, 565);

context.lineTo(800, 565);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.stroke();

context.beginPath();

context.moveTo(100, 450);

context.lineTo(100, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(175, 450);

context.lineTo(175, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(250, 450);

context.lineTo(250, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(325, 450);

context.lineTo(325, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(400, 450);

context.lineTo(400, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(475, 450);

context.lineTo(475, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(550, 450);

context.lineTo(550, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(625, 450);

context.lineTo(625, 598);

context.lineWidth = 13;

context.strokeStyle = 'white';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(625, 490)

context.lineTo(720, 560)

context.lineWidth = 13;

context.strokeStyle = 'white';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(725, 450);

context.lineTo(725, 598);

context.lineWidth = 13;

context.strokeStyle = 'white';

context.lineCap = 'square';

context.stroke();

context.beginPath();

context.moveTo(793, 450);

context.lineTo(793, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(25, 450);

context.lineTo(25, 598);

context.lineWidth = 10;

context.strokeStyle = 'white';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.rect(620, 490, 8, 10);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.rect(620, 563, 8, 10);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.arc(725, 525, 5, 0, 2*Math.PI, false);

context.fillStyle = 'black';

context.fill();

context.beginPath();

context.arc(622, 571, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

context.beginPath();

context.arc(622, 565, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

context.beginPath();

context.arc(622, 498, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

context.beginPath();

context.arc(622, 492, 1.3, 0, 2*Math.PI, false);

context.fillStyle = 'rgb(110, 110, 110)';

context.fill();

                                                                           Logos:

Radio/Podcast: Vibes Radio
Atv/JetSki Rental: Xtreme Rentals
Boating Rental: Smooth Sails
Clothing Line: Embassy NY
Book Rentals: University Books

var startx = 400;

var starty = 200;

var controlx1 = 290;

var controly1 = 60;

var controlx2 = 90;

var controly2 = 250;

var endx1 = 250;

var endy1 = 340;

var controlx3 = 365;

var controly3 = 390;

var endx2 = 400;

var endy2 = 500;

var controlx4 = 435;

var controly4 = 390;

var endx3 = 500;

var endy3 = 350;

var controlx5 = 720;

var controly5 = 250;

var controlx6 = 510;

var controly6 = 60;

context.beginPath();

context.moveTo(startx, starty);

context.bezierCurveTo(controlx1, controly1, controlx2, controly2,  endx1, endy1);

context.quadraticCurveTo(controlx3,controly3, endx2, endy2);

context.quadraticCurveTo(controlx4, controly4, endx3, endy3);

context.bezierCurveTo(controlx5, controly5, controlx6, controly6, startx, starty);

context.fillStyle = 'rgb(255, 70, 120)';

context.fill();

context.stroke();

First day blog

Hey Everyone, My name is Stephen Nebel. I'm from New York, my hobbies are snowboarding, fishing and hiking. I'm hoping to learn in this class how to use the softwares and to get better with each of them.