For our second assignment, we had to create a a landscape or portrait using html 5. I chose to do the Tampa Bay Lightning ice rink. Considering I am a Lightning fan and the image I used as a reference has gradients, curves, circles and it requires for the spaces between the lines and circles to be precise in order for the image to look good.
Below is the image I made with html 5.
Below is the printed reference image in a graph, used to measure the points more accurately.
When I started to work with the first layer, the blue ice background with the gradient, I had some trouble trying to figure out how to put in two separate gradients in a single layer. After consulting the professor, we managed to figure out how to make the gradients a single gradient with various shades, having it all in one code paragraph.
Afterwards, the red circles, the center circle, the lines and smaller circles were just a matter of very specific measuring and figuring out how to place them with the appropriate spaces between each element. The graphed reference helped a lot to better visualize the canvas size.
The Lightning logo in the center circle was fairly easy to measure, but the curved lines around it were a bit of a challenge. I used the quadratic curve for both lines surrounding the lightning bolt.
I learned how to try to predict where the lines and curves and how to measure the spaces between lines and other elements that are suppose to have a certain distance between each other.
Below is the coding used to make the image.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Light Blue Ice Background
context.beginPath();
context.rect(0, 0, 800, 425);
context.lineWidth = 0;
context.fillStyle = 'rgb(135, 206, 250)';
context.fill();
context.stroke();
//Ice Vertical Reflections
var grd = context.createLinearGradient(95, 400, 675, 400);
grd.addColorStop(.1, 'rgb(130, 201, 245)');
grd.addColorStop(.2, 'rgb(255, 255, 255)');
grd.addColorStop(.3, 'rgb(130, 201, 255)');
grd.addColorStop(.75, 'rgb(130, 201, 245)');
grd.addColorStop(.85, 'rgb(255, 255, 255)');
grd.addColorStop(.95, 'rgb(130, 201, 255)');
context.fillStyle = grd;
context.fill();
//Ice Rink Shape
context.beginPath();
context.moveTo(100, 30)
context.quadraticCurveTo(25, 25, 30, 100)
context.lineTo(30, 300);
context.quadraticCurveTo(25, 405, 100, 400);
context.lineTo(700, 400);
context.quadraticCurveTo(770, 400, 769, 300);
context.lineTo(769, 100);
context.quadraticCurveTo(775, 30, 700, 30);
context.lineTo(100, 30);
context.fillStyle = 'rgb(255, 255, 255)';
context.fill();
context.closePath();
context.lineWidth = 5;
context.strokeStyle = 'gray';
context.stroke();
//Ice Rink Lines
//L Red Line
context.beginPath();
context.moveTo(103, 32);
context.lineTo(103, 398);
context.lineWidth = 3;
context.strokeStyle = 'rgba(255, 0, 0, .5)';
context.stroke();
//R Red Line
context.beginPath();
context.moveTo(697, 32);
context.lineTo(697, 398);
context.lineWidth = 3;
context.strokeStyle = 'rgba(255, 0, 0, .5)';
context.stroke();
//L Blue Line
context.beginPath();
context.moveTo(300, 32);
context.lineTo(300, 398);
context.lineWidth = 5;
context.strokeStyle = 'rgb(58, 150, 230)';
context.stroke();
//Center Red Line
context.beginPath();
context.moveTo(400, 32);
context.lineTo(400, 398);
context.lineWidth = 5;
context.strokeStyle = 'red';
context.stroke();
//R Blue Line
context.beginPath();
context.moveTo(500, 32);
context.lineTo(500, 398);
context.lineWidth = 5;
context.strokeStyle = 'rgb(58, 150, 230)';
context.stroke();
//Ice Rink Goal Lines
//L Goal
context.beginPath();
context.moveTo(103, 199);
context.lineTo(103, 240);
context.bezierCurveTo(70, 250, 70, 190, 103, 199);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(93, 220);
context.lineTo(78, 220);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(103, 199);
context.bezierCurveTo(90, 190, 90, 250, 103, 240);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(103, 196);
context.lineTo(103, 244);
context.bezierCurveTo(140, 244, 140, 195, 103, 196);
context.lineWidth = 1;
context.fillStyle = 'rgb(96, 186, 239)';
context.fill();
context.closePath();
context.strokeStyle = 'red';
context.stroke();
//R Goal
context.beginPath();
context.moveTo(698, 199);
context.lineTo(698, 240);
context.bezierCurveTo(735, 245, 735, 190, 698, 199);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(725, 220);
context.lineTo(710, 220);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(698, 199);
context.bezierCurveTo(714, 187, 714, 250, 698, 240);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(698, 196);
context.lineTo(698, 244);
context.bezierCurveTo(665, 236, 665, 200, 698, 196);
context.fillStyle = 'rgb(96, 186, 239)';
context.lineWidth = 1;
context.fill();
context.closePath();
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
//Ice Rink Circles
// TL Red Circle
context.beginPath();
context.arc(175, 125, 55, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
//TL Circle Center
context.beginPath();
context.arc(175, 125, 1, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.stroke();
//TL Circle Lines
context.beginPath();
context.moveTo(173, 65);
context.lineTo(173, 70);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(177, 65);
context.lineTo(177, 70);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(173, 180);
context.lineTo(173, 185);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(177, 180);
context.lineTo(177, 185);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(171, 116);
context.lineTo(171, 121);
context.lineTo(166, 121);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(179, 116);
context.lineTo(179, 121);
context.lineTo(184, 121);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(171, 134);
context.lineTo(171, 129);
context.lineTo(166, 129);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(179, 134);
context.lineTo(179, 129);
context.lineTo(184, 129);
context.strokeStyle = 'red';
context.stroke();
//BL Red Circle
context.beginPath();
context.arc(175, 300, 55, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
//BL Circle Center
context.beginPath();
context.arc(175, 300, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
//BL Circle Lines
context.beginPath();
context.moveTo(173, 240);
context.lineTo(173, 245);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(177, 240);
context.lineTo(177, 245);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(173, 355);
context.lineTo(173, 360);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(177, 355);
context.lineTo(177, 360);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(171, 291);
context.lineTo(171, 296);
context.lineTo(166, 296);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(179, 291);
context.lineTo(179, 296);
context.lineTo(184, 296);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(171, 309);
context.lineTo(171, 304);
context.lineTo(166, 304);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(179, 309);
context.lineTo(179, 304);
context.lineTo(184, 304);
context.strokeStyle = 'red';
context.stroke();
//TR Red Circle
context.beginPath();
context.arc(625, 125, 55, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
//TR Circle Center
context.beginPath();
context.arc(625, 125, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
//TR Circle Lines
context.beginPath();
context.moveTo(623, 65);
context.lineTo(623, 70);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(627, 65);
context.lineTo(627, 70);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(623, 180);
context.lineTo(623, 185);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(627, 180);
context.lineTo(627, 185);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(621, 116);
context.lineTo(621, 121);
context.lineTo(616, 121);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(629, 116);
context.lineTo(629, 121);
context.lineTo(634, 121);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(621, 134);
context.lineTo(621, 129);
context.lineTo(616, 129);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(629, 134);
context.lineTo(629, 129);
context.lineTo(634, 129);
context.strokeStyle = 'red';
context.stroke();
//BR Red Circle
context.beginPath();
context.arc(625, 300, 55, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'red';
context.stroke();
//BR Circle Center
context.beginPath();
context.arc(625, 300, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
//BR Circle Lines
context.beginPath();
context.moveTo(623, 240);
context.lineTo(623, 245);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(627, 240);
context.lineTo(627, 245);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(623, 355);
context.lineTo(623, 360);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(627, 355);
context.lineTo(627, 360);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(621, 291);
context.lineTo(621, 296);
context.lineTo(616, 296);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(629, 291);
context.lineTo(629, 296);
context.lineTo(634, 296);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(621, 309);
context.lineTo(621, 304);
context.lineTo(616, 304);
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(629, 309);
context.lineTo(629, 304);
context.lineTo(634, 304);
context.strokeStyle = 'red';
context.stroke();
//Center Circle
context.beginPath();
context.arc(400, 225, 112, 0, 2 * Math.PI, false);
context.lineWidth = 8;
context.fillStyle = 'rgba(1, 62, 125, 1)';
context.fill();
context.strokeStyle = 'rgb(153, 169, 232)';
context.closePath();
context.stroke();
context.beginPath();
context.arc(400, 225, 100, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'white';
context.stroke();
context.beginPath();
context.arc(400, 225, 95, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.strokeStyle = 'white';
context.stroke();
//Circles Around Center Circle
context.beginPath();
context.arc(325, 125, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.arc(325, 325, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.arc(475, 125, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.arc(475, 325, 1, 0, 2 * Math.PI, false);
context.lineWidth = 1;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = 'red';
context.stroke();
//Tampa Bay Lightning Center Logo
//Lightning Bolt
context.beginPath();
context.moveTo(445, 158);
context.lineTo(415, 190);
context.lineTo(430, 186);
context.lineTo(400, 222);
context.lineTo(415, 218);
context.lineTo(345, 285);
context.lineTo(377, 238);
context.lineTo(362, 242);
context.lineTo(390, 205);
context.lineTo(375, 209);
context.lineTo(405, 168);
context.lineTo(445, 158);
context.fillStyle = 'white';
context.fill();
context.closePath();
context.strokeStyle = 'white';
context.stroke();
//Lightning Bolt Side Lines
//L Line
context.beginPath();
context.moveTo(404, 169);
context.quadraticCurveTo(275, 200, 359, 265);
context.lineTo(365, 256);
context.quadraticCurveTo(283, 200, 401, 174);
context.lineTo(404, 169);
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();
//R Line
context.beginPath();
context.moveTo(435, 179);
context.quadraticCurveTo(490, 249, 375, 263);
context.lineTo(366, 272);
context.quadraticCurveTo(525, 250, 444, 176);
context.lineTo(435, 179);
context.fillStyle = 'white';
context.fill();
context.closePath();
context.strokeStyle = 'white';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="425"></canvas>
</body>
