HTML5 Canvas Project

February 10, 2020

HTML5 Canvas Project

"Open Your Eye"

After many, MANY hours of work, here's my HTML5 Canvas Art! I've titled it "Open Your Eye," and I think it's pretty good!

When I set out to make this piece, I thought about the power of observation. Too often in life do we speak more than we observe, and we tend to pay the price as a result. I wanted to represent that in a visual way, using the limited knowledge of HTML5 Canvas that I possess. If there's something that I want people to take away from it--well, it's pretty simple: "Say less and do more."

The rough sketch isn't really representative of the final product, as I didn't have the idea or message fully fleshed out quite yet (hence the title "rough sketch"). Here it is below:

As for how long this piece took me, I'd say about a total of three days of combined work. Obviously I didn't work for 36 hours straight, but it sure felt like it! :) To end this little statement of mine, I think I can truly say that I'm happy with this piece. I hope everyone else enjoys it as much as I do!

And of course, here's the html code for the 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(255,255,255,1); }

</style>

</head>

<body>

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

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

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

//pupil

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var centerX = 390;

var centerY = 290;

var radius = 60;

var startX = 300;

var startY = 200;

var startRadius = 50;

var endX = 400;

var endY = 300;

var endRadius = 200;

context.beginPath();

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

context.lineWidth = 20;

context.fillStyle = 'rgb(25, 255, 255)';

context.fill();

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

context.stroke();

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

var grd = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

grd.addColorStop(0, 'rgb(0, 250, 255)');

grd.addColorStop(0.5, 'rgb(100, 0, 0)');

grd.addColorStop(1, 'rgb(0, 100, 100)');

context.fillStyle = grd;

context.fill();

context.stroke();

//EYE SHAPE

// starting point coordinates

var x = 150;

var y = 300;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 400;

var cpointY = canvas.height / 1 - 500;

// ending point coordinates

var x1 = 620;

var y1 = 300;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 5;

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

context.stroke();

var x = 150;

var y = 300;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1 - 400;

var cpointY = canvas.height / 1 - 150;

// ending point coordinates

var x1 = 620;

var y1 = 300;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 5;

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

context.stroke();

//ARCS LEFT SIDE

//arc 1

var centerX = 90;

var centerY = 120

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 2

var centerX = 90;

var centerY = 170

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 3

var centerX = 90;

var centerY = 220

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 4

var centerX = 90;

var centerY = 270

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 5

var centerX = 90;

var centerY = 320

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 6

var centerX = 90;

var centerY = 370

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 7

var centerX = 90;

var centerY = 420

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 8

var centerX = 90;

var centerY = 470

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//arc 9

var centerX = 90;

var centerY = 520

var radius = 60;

var startangle = 1.5* Math.PI;;

var endangle = 0.5* Math.PI;

context.beginPath();

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

context.fillStyle = "blue";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "orange";

context.stroke();

//ARCS RIGHT SIDE

//arc 1

var centerX = 680;

var centerY = 120

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 2

var centerX = 680;

var centerY = 170

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 3

var centerX = 680;

var centerY = 220

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 4

var centerX = 680;

var centerY = 270

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 5

var centerX = 680;

var centerY = 320

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 6

var centerX = 680;

var centerY = 370

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 7

var centerX = 680;

var centerY = 420

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 8

var centerX = 680;

var centerY = 470

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//arc 9

var centerX = 680;

var centerY = 520

var radius = 60;

var startangle = 0.5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "orange";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "blue";

context.stroke();

//bezier curve 1

// starting point coordinates

var x = -15;

var y = 300;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 4;

var cpointY1 = canvas.height / 2 + 930;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 3.5;

var cpointY2 = canvas.height / 2 - 700;

// ending point coordinates

var x1 = 710;

var y1 = 70;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 2;

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

context.lineCap = 'round'

context.stroke();

//bezier curve 2

// starting point coordinates

var x = 890;

var y = 190;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.25;

var cpointY1 = canvas.height / 1 + 930;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 2;

var cpointY2 = canvas.height / 2.5 - 1200;

// ending point coordinates

var x1 = -210;

var y1 = 450;

context.beginPath();

context.moveTo(x, y);

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

context.lineWidth = 2;

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

context.lineCap = 'round'

context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS: ADD YOUR NAME AND CLASS INFORMATION

var credits = "Matt France Macias, FMX 210, Spring, 2020";

context.beginPath();

context.font = 'bold 20px Arial';

context.fillStyle = "rgba(0,0,0,0)";

context.fillText(credits, 10, 590);

context.closePath();

</script>

</body>

</html>

Search This Blog

Matt's Journey with Digital Media

HTML5 Canvas Project

Comments

Post a Comment

Popular Posts

Propaganda Poster

Somewhere