HTML5 Final Project

For my final project I recreated a cubist rendering of the paintings Mona Lisa combined with Starry Night by Vanessa Stark. I used this as my inspiration because the combinations of the different art pieces by different artists along with the added cubism really captured my attention and I enjoy art that is different. It took me about 12 hours to complete this project because of all of the different shapes and details that were in the piece. This class was also the first time I ever used Dreamweaver as well as coding in general. My initial vision of what I had in mind for my project was going to be more fluid and blended on the right side of the face, however since I’m new to Dreamweaver I had a tough time drawing on it. Although it wasn’t fluid, I came to enjoy my geometric version of it better because it was my version of it and I believe that’s what art is all about, putting your own spin on what you create. I enjoyed creating this because it allowed me to become even more creative with using different shapes and piecing them together to create one vision. I also especially enjoyed the fact that it is not “typical” art and I like being different.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Radial gradients</title>

<style>

html {

background: -webkit-radial-gradient(top left, yellow, green);

background: radial-gradient(at top left, blue, black);

}

height: "600";

}

p {

width: 300px;

height: 150px;

padding: 20px;

margin: 20px 0 0 20px;

float: left;

border: 1px solid #0000D4;

}

</style>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//stars

//star 1

var centerX = canvas.width / 7;

var centerY = canvas.height / 10;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, .5, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//star 2

var centerX = canvas.width / 20;

var centerY = canvas.height / 5;

var radius = 8;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, .5, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//star 3

var centerX = canvas.width / 7;

var centerY = canvas.height / 2;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, .5, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//star 4

var centerX = canvas.width / 20;

var centerY = canvas.height / 1.5;

var radius = 4;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, .5, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//star 5

var centerX = canvas.width / 20;

var centerY = canvas.height / 3;

var radius = 3;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//moon 1

var centerX = canvas.width / 1.05;

var centerY = canvas.height / 14;

var radius = 30;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 30, centerX, centerY, 20);

grd.addColorStop(0, "rgb(173,216,230)");

grd.addColorStop(1, "white");

context.fillStyle = grd;

context.fill();

var centerX = canvas.width / 1.05;

var centerY = canvas.height / 14;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//moon Arc

// x and y coordinates of the tracing circle

var x = 445;

var y = 42;

// radius of the tracing circle

var radius = 20;

// Math.PI is HALF the circle, 2*Math.PI is the full circle

// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = .5 * Math.PI;

var endAngle = 1.75 * Math.PI;

// draw the arc clockwise or counterclockwise

var counterClockwise = true; // if set to true it draws the complimentary arc

context.beginPath();

// draw the arc

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 7;

// line color

context.strokeStyle = 'yellow';

context.stroke();

//underface

var x=120;

var y=230;

var width = 330

var height= 150;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = "black";

context.fill();

context.stroke();

//2

var x=120;

var y=100;

var width = 145

var height= 300;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = "black";

context.fill();

context.stroke();

//underforeheadleft

var centerX = canvas.width / 2.3;

var centerY = canvas.height / 4;

var radius = 100;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "rgb(139,0,0)";

var grd=context.createRadialGradient(centerX, centerY, 60, centerX, centerY, .5);

grd.addColorStop(0, "rgb(0,0,0)");

grd.addColorStop(1, "rgb(0,0,0)")

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//face

var centerX = canvas.width / 2.3;

var centerY = canvas.height / 4;

var radius = 90;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "rgb(139,0,0)";

var grd=context.createRadialGradient(centerX, centerY, 60, centerX, centerY, .5);

grd.addColorStop(0, "rgb(139,0,0)");

grd.addColorStop(1, "rgb(255,69,0)")

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//eye1 circle

var centerX = canvas.width / 2.55;

var centerY = canvas.height / 2;

var radius = 60;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

// GREEN TRIANGLE 1

context.beginPath(); // begin a shape

context.moveTo(120,195); // point A coordinates

context.lineTo(120, 255); // point B coords

context.lineTo(225,255); // point C coords

context.closePath(); // close the shape

context.lineWidth = 6

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle= "black"

context.fillStyle = "rgb(50,205,50)"; // Reb Green Blue Alpha

context.stroke()

context.fill();

//quadratic1

context.lineWidth= 6;

context.beginPath();

context.moveTo(170, 220);

context.quadraticCurveTo(260, 285, 250, 200);

context.strokeStyle= "black";

context.fillStyle= "rgb(50,205,50)";

context.stroke()

context.fill();

//rectangle1

var x=120;

var y=360;

var width = 150

var height= 80;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle= 'black'

context.fillStyle = 'rgb(139,0,0)';

context.stroke();

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//bezier1

context.lineWidth= 5;

context.beginPath();

context.moveTo(120, 340);

context.quadraticCurveTo(220, 470, 250, 340);

context.strokeStyle= "black";

context.fillStyle= "rgb(50,205,50)";

context.stroke()

context.fill();

//eyeball 1

var centerX = canvas.width / 2.3;

var centerY = canvas.height / 2;

var radius = 30;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(184,134,11)");

grd.addColorStop(1, "rgb(184,134,11)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//pupil

var centerX = canvas.width / 2.2;

var centerY = canvas.height / 2;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(0,0,0)");

grd.addColorStop(1, "rgb(0,0,0)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//bezier2 eye

context.lineWidth= 6;

context.beginPath();

context.moveTo(130, 280);

context.quadraticCurveTo(190, 220, 250, 275);

context.strokeStyle= "black";

context.fillStyle= "rgb(50,205,50)";

context.stroke()

context.fill();

//bezier3 eye

context.lineWidth= 6;

context.beginPath();

context.moveTo(130, 325);

context.quadraticCurveTo(170, 380, 250, 325);

context.strokeStyle= "black";

context.fillStyle= "rgb(225,215,0)";

context.stroke()

context.fill();

//Arc 2: eye

// x and y coordinates of the tracing circle

var x = 180;

var y = 300;

// radius of the tracing circle

var radius = 55;

// Math.PI is HALF the circle, 2*Math.PI is the full circle

// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = .4 * Math.PI;

var endAngle = 1.55 * Math.PI;

// draw the arc clockwise or counterclockwise

var counterClockwise = false; // if set to true it draws the complimentary arc

context.beginPath();

// draw the arc

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 10;

// line color

context.strokeStyle = 'rgb(139,0,0)';

context.stroke();

//triangle

context.beginPath(); // begin a shape

context.moveTo(120,435); // point A coordinates

context.lineTo(275, 435); // point B coords

context.lineTo(202,500); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "rgb(50,205,50)"

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.fill()

context.stroke();

//swoosh quadratic

var x = 200;

var y = 500;

var controlX = 230;

var controlY = 460;

var x1 = 290;

var y1 = 435;

var controlX1 = 225;

var controlY1 = 500;

var x2 = 270;

var y2 = 500;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlX, controlY, x1, y1);

context.quadraticCurveTo(controlX1, controlY1, x2, y2);

context.fillStyle = 'rgb(139, 0, 0)';

context.fill();

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

//neck 1

var x=250;

var y=500;

var width = 70

var height= 250;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

// add linear gradient

context.createLinearGradient(x, y, x+width, y+height);

context.fillStyle = "rgb(50,205,50)";

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//neck2

var x=320;

var y=500;

var width = 90

var height= 250;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

// add linear gradient

context.createLinearGradient(x, y, x+width, y+height);

context.fillStyle = "rgb(255,180,0)";

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//faceright

var x=270;

var y=230;

var width = 150

var height= 250;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

//context.fillStyle = 'rgb(0,255,0)';

context.fillStyle= "rgb(255,180,0)"

context.fillStyle = "rgb(255,180,0)" ;

context.fill();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//chin

var centerX = canvas.width / 1.7;

var centerY = canvas.height / 1.25;

var radius = 44;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//neck3

context.beginPath(); // begin a shape

context.moveTo(400,635); // point A coordinates

context.lineTo(475, 600); // point B coords

context.lineTo(400,540); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "rgb(255,180,0)"

context.fill()

//chinright

context.beginPath(); // begin a shape

context.moveTo(400,450); // point A coordinates

context.lineTo(325, 510); // point B coords

context.lineTo(325,450); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "rgb(255,180,0)"

context.fill()

context.beginPath(); // begin a shape

context.moveTo(410,500); // point A coordinates

context.lineTo(490, 380); // point B coords

context.lineTo(328,500); // point C coords

context.closePath(); // close the shape

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "rgb(255,180,0)"

context.fill()

//face

var x=400;

var y=240;

var width = 50

var height= 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

//context.fillStyle = 'rgb(0,255,0)';

context.fillStyle= "rgb(255,180,0)"

context.fillStyle = "rgb(255,180,0)" ;

context.fill();

var x=450;

var y=230;

var width = 20

var height= 180;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

//context.fillStyle = 'rgb(0,255,0)';

context.fillStyle= "rgb(255,180,0)"

context.fillStyle = "rgb(255,180,0)" ;

context.fill();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//foreheadright

context.beginPath(); // begin a shape

context.moveTo(255,50); // point A coordinates

context.lineTo(255, 250); // point B coords

context.lineTo(470,250); // point C coords

context.closePath(); // close the shape

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "rgb(255,180,0)"

context.fill()

//nose

var x=245;

var y=250;

var width = 30

var height= 130;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = "rgb(255,215,0)"

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//nosetringl

context.beginPath(); // begin a shape

context.moveTo(240,370); // point A coordinates

context.lineTo(280, 370); // point B coords

context.lineTo(270,400); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "rgb(255,215,0)"

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.fill()

context.stroke();

//eyelid

var x=300;

var y=230;

var width = 130

var height= 75;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 10;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

context.fillStyle = "black";

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//eye right white

var centerX = canvas.width / 1.31;

var centerY = canvas.height / 2.05;

var radius = 60;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//eyeball right

var centerX = canvas.width / 1.25;

var centerY = canvas.height / 2.05;

var radius = 30;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(184,134,11)");

grd.addColorStop(1, "rgb(184,134,11)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//pupil

var centerX = canvas.width / 1.2;

var centerY = canvas.height / 2.05;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);

grd.addColorStop(0, "rgb(0,0,0)");

grd.addColorStop(1, "rgb(0,0,0)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

//eyelid right

context.lineWidth= 6;

context.beginPath();

context.moveTo(420, 270);

context.quadraticCurveTo(370, 195, 300, 270);

context.strokeStyle= "black";

context.fillStyle= "rgb(225,153,76)";

context.stroke()

context.fill();

//bezier3 eye

context.lineWidth= 6;

context.beginPath();

context.moveTo(420, 320);

context.quadraticCurveTo(370, 380, 300, 320);

context.strokeStyle= "black";

context.fillStyle= "rgb(225,153,76)";

context.stroke()

context.fill();

//lips

context.lineWidth= 6;

context.beginPath();

context.moveTo(220, 420);

context.quadraticCurveTo(260, 390, 300, 420);

context.strokeStyle= "black";

context.fillStyle= "rgb(255,182,193)";

context.stroke()

context.fill();

//bezier lips

context.lineWidth= 6;

context.beginPath();

context.moveTo(220, 420);

context.quadraticCurveTo(260, 460, 300, 420);

context.strokeStyle= "black";

context.fillStyle= "rgb(255,182,193)";

context.stroke()

context.fill();

//moon2

var centerX = canvas.width / 1.7;

var centerY = canvas.height / 10;

var radius = 30;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 20);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//moon3

var centerX = canvas.width / 1.26;

var centerY = canvas.height / 12;

var radius = 20;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 20);

grd.addColorStop(0, "rgb(173,216,230)");

grd.addColorStop(1, "white");

context.fillStyle = grd;

context.fill();

var centerX = canvas.width / 1.26;

var centerY = canvas.height / 12;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//moon4

var centerX = canvas.width / 1.04;

var centerY = canvas.height / 6;

var radius = 20;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 20);

grd.addColorStop(0, "rgb(173,216,230)");

grd.addColorStop(1, "white");

context.fillStyle = grd;

context.fill();

var centerX = canvas.width / 1.04;

var centerY = canvas.height / 6;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 8);

grd.addColorStop(0, "rgb(173,216,230)");

grd.addColorStop(1, "white");

context.fillStyle = grd;

context.fill();

var centerX = canvas.width / 1.04;

var centerY = canvas.height / 6;

var radius = 10;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, .5);

grd.addColorStop(0, "rgb(255,215,0)");

grd.addColorStop(1, "rgb(255,250,240)");

context.fillStyle = grd;

context.fill();

//bezier curves background 1

context.lineWidth= 10;

context.beginPath();

context.moveTo(240, 50);

context.moveTo(415,50);

context.bezierCurveTo(350,120,530,135,440,150);

context.strokeStyle= "rgb(135,206,235)";

context.stroke()

context.lineWidth= 3;

context.beginPath();

context.moveTo(240, 50);

context.moveTo(415,50);

context.bezierCurveTo(350,120,530,135,440,150);

context.strokeStyle= "white";

context.stroke()

//bezier curves background 2

context.lineWidth= 10;

context.beginPath();

context.moveTo(580, 100);

context.moveTo(430,200);

context.bezierCurveTo(480,200,370,130,425,130);

context.strokeStyle= "rgb(135,206,235)";

context.stroke()

context.lineWidth= 3;

context.beginPath();

context.moveTo(580, 100);

context.moveTo(430,200);

context.bezierCurveTo(480,200,370,130,425,130);

context.strokeStyle= "white";

context.stroke()

//squarehouse1

var x=50;

var y=500;

var width = 80

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

var grd = context.createLinearGradient(x, y, x+width, y+height);

context.fillStyle = "blue";

context.fill();

context.stroke();

//house2

var x=0;

var y=470;

var width = 50

var height= 250;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

//context.fillStyle = 'rgb(0,255,0)';

context.strokeStyle = 'rgb(0,0,0)';

// add linear gradient

var grd = context.createLinearGradient(x, y, x+width, y+height);

context.fillStyle = "blue";

context.fill();

context.stroke();

//context.rect(x, y, width, height); // top left corner x and y coordinates, width and height

// for a square width = height , the width and the height have the same value

//roof 1

context.beginPath(); // begin a shape

context.moveTo(30,500); // point A coordinates

context.lineTo(150, 500); // point B coords

context.lineTo(90,460); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "blue)"

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.fill()

context.stroke();

//roof 2

context.beginPath(); // begin a shape

context.moveTo(-20,470); // point A coordinates

context.lineTo(20, 400); // point B coords

context.lineTo(70,470); // point C coords

context.closePath(); // close the shape

context.lineWidth = 5

; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.fillStyle= "blue)"

context.strokeStyle = "black"; // Reb Green Blue Alpha

context.fill()

context.stroke();

//bezier door1

context.lineWidth= 6;

context.beginPath();

context.moveTo(15, 620);

context.quadraticCurveTo(20, 380, 30, 620);

context.strokeStyle= "black";

context.fillStyle= "black";

context.stroke()

context.fill();

//bezier door2

context.lineWidth= 6;

context.beginPath();

context.moveTo(110, 780);

context.quadraticCurveTo(90, 380, 80, 620);

context.strokeStyle= "black";

context.fillStyle= "black";

context.stroke()

context.fill();

//star 6

var centerX = canvas.width / 30;

var centerY = canvas.height / 2.4;

var radius = 3;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//star 7

var centerX = canvas.width / 10;

var centerY = canvas.height / 2;

var radius = 4;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//star 8

var centerX = canvas.width / 40;

var centerY = canvas.height / 1.8;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//star 9

var centerX = canvas.width / 20;

var centerY = canvas.height / 8;

var radius = 3;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//star 10

var centerX = canvas.width / 5;

var centerY = canvas.height / 2.6;

var radius = 7;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//star 11

var centerX = canvas.width / 5;

var centerY = canvas.height / 20;

var radius = 3;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

//star 12

var centerX = canvas.width / 7;

var centerY = canvas.height / 3.7;

var radius = 6;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

//context.fillStyle = "red";

var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 10);

grd.addColorStop(0, "rgb(255,250,240)");

grd.addColorStop(1, "rgb(255,215,0)");

context.fillStyle = grd;

context.fill();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

</body>

</html>

Comments

hannahterese3December 4, 2019 at 7:31 AM
I really like how you collaged many different shapes together to create your version of a painting. HTML is hard, so I give you a lot of credit for how well the placement of the shapes are in this project. As well, I admire your gradient circles, as they add more dimension to the piece.

Search This Blog

My Blog

HTML5 Final Project

Comments

Post a Comment

Popular posts from this blog

Final Blog

BW to Color