Canvas Project

February 11, 2020

Canvas Project

Inspiration Image

The Sun and Moon: Amanda Hamilton

For my project, I wanted to create something that was happy to look at. I have always had a love for the sun and the moon, and I searched online till I found an image that I thought would be realistic for me to make on Dreamweaver. Before this project I had never used Dreamweaver before, and because of this I really struggled at times. My completed image above took me around 20 hours, through lots of trial and error. The most difficult part for me was working with the curves on the clouds. I used a blue to white gradient to make it look like the sky was fading into clouds. The stars were not part of my original plan, but after looking at the path my image was taking it didn't feel appropriate to add more clouds to the top, but I felt like it needed something. My image looks very childlike or cartoonish and that is what I really like about it, I really wanted it to look cute and clean. My project is successful in displaying the use of colors, shapes, lines, bezier and quadratic curves. Even though this project was stressful at times and it took me a long time to get used to the software, I am very happy with the results and with the knowledge I have gained about how to use Dreamweaver coding.

Below is the coding to my canvas project!

<!doctype html>

<html>

<head>

<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#myCanvas { border: rgba(102,0,255,1) medium dashed; background-color: rgba(124,136,208,1.00); }

</style>

</head>

<body>

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

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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

/// background filled with BW vertical gradient

var grd = context.createLinearGradient(0, 0, 0, 370);

grd.addColorStop(0, "blue");

grd.addColorStop(1, "white");

context.fillStyle = grd;

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

////sun

var centerX = canvas.width / 4;

var centerY = canvas.height / 1.8;

var radius = 100;

var startangle = 0;

var endangle =2 * Math.PI;

context.beginPath();

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

context.lineWidth = 10;

context.strokeStyle = "yellow";

context.stroke();

context.fillStyle = "yellow";

context.fill();

////sun eye 1

var centerX1 = canvas.width / 4.7;

var centerY1 = canvas.height / 2;

var radius = 20;

var startangle = 0;

var endangle = 1.88 * Math.PI;

context.beginPath();

context.arc(centerX1, centerY1, radius, startangle, endangle, false);

context.lineWidth = 7;

context.strokeStyle = "black";

context.stroke();

context.fillStyle = "white";

context.fill();

////sun eye 2

var centerX2 = canvas.width / 3.8;

var centerY2 = canvas.height / 2;

var radius = 20;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX2, centerY2, radius, startangle, endangle, false);

context.lineWidth = 7;

context.strokeStyle = "black";

context.stroke();

context.fillStyle = "white";

context.fill();

////sun eye 1 center

var centerX3 = canvas.width / 3.95;

var centerY3 = canvas.height / 1.95;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX3, centerY3, radius, startangle, endangle, false);

context.lineWidth = 10;

context.strokeStyle = "black";

context.stroke();

////sun eye 2 center

var centerX4 = canvas.width / 4.5;

var centerY4 = canvas.height / 1.95;

var radius = 5;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(centerX4, centerY4, radius, startangle, endangle, false);

context.lineWidth = 10;

context.strokeStyle = "black";

context.stroke();

//sun smile

var centerX5 = canvas.width / 4.2;

var centerY5 = canvas.height / 1.7;

var radius = 50;

var startangle = 0;

var endangle = 1* Math.PI;

context.beginPath();

context.arc(centerX5, centerY5, radius, startangle, endangle, false);

//context.fillStyle = "yellow";

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

context.fillStyle = "white";

context.fill();

// Sun top arch of smile

var x = 140;

var y = 355;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - 200;

var cpointY = canvas.height / 2 - -90;

// ending point coordinates

var x1 = 240;

var y1 = 355;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

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

context.stroke();

context.fillStyle = "yellow";

context.fill();

//Sun nose

var x= 170;

var y = 353;

var x1 = 200;

var y1 = 353;

var x2 = 180;

var y2 = 330

//comment

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1); // move to starting coordinates

context.lineTo(x2, y2); // draw line to following point

context.lineCap = 'round';

context.lineWidth = 3;// declare the width in pixels of the line

context.strokeStyle = 'rgb(0,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

////moon

var centerX9 = canvas.width / 1.35;

var centerY9 = canvas.height / 3.3;

var radius = 100;

var startangle = 0;

var endangle = 1.35 * Math.PI;

context.beginPath();

context.arc(centerX9, centerY9, radius, startangle, endangle, false);

context.lineWidth = 10;

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

context.stroke();

// arch on moon

var x = 545;

var y = 100;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -200;

var cpointY = canvas.height / 2 - 40;

// ending point coordinates

var x1 = 690;

var y1 = 188;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

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

context.stroke();

//moon nose

var x= 580;

var y = 180;

var x1 = 590;

var y1 = 150;

var x2 = 561;

var y2 = 150

//comment

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1); // move to starting coordinates

context.lineTo(x2, y2); // draw line to following point

context.lineCap = 'round';

context.lineWidth = 3;// declare the width in pixels of the line

context.strokeStyle = 'rgb(0,0,150)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

context.fillStyle = "rgb(0,0,150)";

context.fill();

// Moons eye

var x = 520;

var y = 155;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -130;

var cpointY = canvas.height / 2 - 169;

// ending point coordinates

var x1 = 550;

var y1 = 145;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

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

context.stroke();

// Moons mouth top

var x = 590;

var y = 180;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -210;

var cpointY = canvas.height / 2 - 100;

// ending point coordinates

var x1 = 570;

var y1 = 250;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

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

context.stroke();

// Moons mouth bottom

var x = 645;

var y = 210;

// control point coordinates ( magnet )

var cpointX = canvas.width / 2 - -250;

var cpointY = canvas.height / 2 - 62;

// ending point coordinates

var x1 = 570;

var y1 = 250;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

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

context.stroke();

//cloud bottom

var centerX = canvas.width / 1.5;

var centerY = canvas.height / 1.2;

var radius = 70;

var startangle = 1;

var endangle = 1* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "grey";

context.stroke();

context.fillStyle = "white";

context.fill();

//cloud left side

var centerX = canvas.width / 1.7;

var centerY = canvas.height / 1.33;

var radius = 50;

var startangle = 1.65;

var endangle = 1.5* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "grey";

context.stroke();

context.fillStyle = "white";

context.fill();

//cloud top

var centerX = canvas.width / 1.53;

var centerY = canvas.height / 1.511;

var radius = 50;

var startangle = 3;

var endangle = 1.8* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "grey";

context.stroke();

context.fillStyle = "white";

context.fill();

//cloud right side

var centerX = canvas.width / 1.35;

var centerY = canvas.height / 1.49;

var radius = 50;

var startangle = 4;

var endangle = 2* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "grey";

context.stroke();

context.fillStyle = "white";

context.fill();

//cloud far right side

var centerX = canvas.width / 1.19;

var centerY = canvas.height / 1.35;

var radius = 50;

var startangle = 4;

var endangle = 2.5* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "grey";

context.stroke();

context.fillStyle = "white";

context.fill();

//cloud far bottom right side

var centerX = canvas.width / 1.3;

var centerY = canvas.height / 1.1;

var radius = 73;

var startangle = 5.5;

var endangle = 2.9* Math.PI;

context.beginPath();

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

//context.fillStyle = "red";

context.lineWidth = 5;

context.strokeStyle = "grey";

context.stroke();

context.fillStyle = "white";

context.fill();

//Star Variable

var starAx1 = 535;

var starAy1 = 35;

var starAx2 = 525;

var starAy2 = 60;

var starAx3 = 510;

var starAy3 = 50;

var starAx4 = 525;

var starAy4 = 70;

var starAx5 = 510;

var starAy5 = 95;

var starAx6 = 533;

var starAy6 = 78;

var starAx7 = 560;

var starAy7 = 95;

var starAx8 = 540;

var starAy8 = 70;

var starAx9 = 565;

var starAy9 = 50;

var starAx10 = 540;

var starAy10 = 60;

var starAx11 = 535;

var starAy11 = 35;

//StarB shape

context.beginPath();

context.moveTo(starAx1-100,starAy1+100);

context.lineTo(starAx2-100,starAy2+100);

context.lineTo(starAx3-100,starAy3+100);

context.lineTo(starAx4-100,starAy4+100);

context.lineTo(starAx5-100,starAy5+100);

context.lineTo(starAx6-100,starAy6+100);

context.lineTo(starAx7-100,starAy7+100);

context.lineTo(starAx8-100,starAy8+100);

context.lineTo(starAx9-100,starAy9+100);

context.lineTo(starAx10-100,starAy10+100);

context.lineTo(starAx11-100,starAy11+100);

context.fillStyle = "rgb(100, 200, 500)";

context.fill();

context.strokeStyle = "rgb(255, 255, 100)";

context.stroke();

//StarC shape

context.beginPath();

context.moveTo(starAx1-220,starAy1+30);

context.lineTo(starAx2-220,starAy2+30);

context.lineTo(starAx3-220,starAy3+30);

context.lineTo(starAx4-220,starAy4+30);

context.lineTo(starAx5-220,starAy5+30);

context.lineTo(starAx6-220,starAy6+30);

context.lineTo(starAx7-220,starAy7+30);

context.lineTo(starAx8-220,starAy8+30);

context.lineTo(starAx9-220,starAy9+30);

context.lineTo(starAx10-220,starAy10+30);

context.lineTo(starAx11-220,starAy11+30);

context.fillStyle = "rgb(100, 200, 500)";

context.fill();

context.strokeStyle = "rgb(255, 255, 100)";

context.stroke();

//StarD shape

context.beginPath();

context.moveTo(starAx1-450,starAy1+20);

context.lineTo(starAx2-450,starAy2+20);

context.lineTo(starAx3-450,starAy3+20);

context.lineTo(starAx4-450,starAy4+20);

context.lineTo(starAx5-450,starAy5+20);

context.lineTo(starAx6-450,starAy6+20);

context.lineTo(starAx7-450,starAy7+20);

context.lineTo(starAx8-450,starAy8+20);

context.lineTo(starAx9-450,starAy9+20);

context.lineTo(starAx10-450,starAy10+20);

context.lineTo(starAx11-450,starAy11+20);

context.fillStyle = "rgb(100, 200, 500)";

context.fill();

context.strokeStyle = "rgb(255, 255, 100)";

context.stroke();

// Top sun ray

context.beginPath(); // begin a shape

context.moveTo(150,150); // point A coordinates

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

context.lineTo(180,200); // point C coords

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// left sun ray

context.beginPath(); // begin a shape

context.moveTo(80,280); // point A coordinates

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

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

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// top right sun ray

context.beginPath(); // begin a shape

context.moveTo(375,230); // point A coordinates

context.lineTo(330, 200); // point B coords

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

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// lower right sun ray

context.beginPath(); // begin a shape

context.moveTo(330,330); // point A coordinates

context.lineTo(385, 300); // point B coords

context.lineTo(385,350); // point C coords

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// bottom sun ray

context.beginPath(); // begin a shape

context.moveTo(175,465); // point A coordinates

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

context.lineTo(200,520); // point C coords

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// bottom left sun ray

context.beginPath(); // begin a shape

context.moveTo(15,390); // point A coordinates

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

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

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// bottom far right sun ray

context.beginPath(); // begin a shape

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

context.lineTo(300, 480); // point B coords

context.lineTo(285,430); // point C coords

context.closePath(); // close the shape

context.lineWidth = 10; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(0,0,0,0)"; // Reb Green Blue Alpha

context.stroke();

context.fillStyle = "yellow";

context.fill();

// right partial cloud

var x = 800;

var y = 600;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.5;

var cpointY1 = canvas.height / 1 +60;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / .95;

var cpointY2 = canvas.height / 2 - 1;

// ending point coordinates

var x1 = 800;

var y1 = 500;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 3;

context.strokeStyle = "grey";

context.lineCap = 'round'

context.stroke();

</script>

</body>

</html>

Search This Blog

Amanda's FMX210 Blog

Canvas Project

Comments

Post a Comment

Popular Posts

Somewhere Project

Self Portrait/ Propoganda poster