My First HTML5 Canvas Graphic

September 22, 2020

My First HTML5 Canvas Graphic

HTML5 Canvas: Untitled Paper

Above is the final product of my HTML5 Canvas assignment for my Fall 2020 Digital Media course. I was hesitant to begin the code, out of fear that I would be committing a few hours at a time on the graphic. Once I started, it was definitely a learning process, regardless that we had a few preliminary coding lessons in class. It took me a total of 10 hours to code this graphic, and although it is complete, I would add more shapes and details if I had the time.

Below is my first sketch of what I originally wanted to code. I was inspired to draw this design because my friend has origami in his house, and was incorporating origami art on a skateboard deck he was painting. I was sketching designs alongside him, to give him and myself, inspiration for our work. When I began the actual code for this assignment, I had become more experimental with my shapes, colors and gradients, and essentially changed the design anyway. The sketch and the final code are still very similar.

So, my idea for the piece, was to show an origami or paper airplane, entering another dimension or entering a brighter sky. I wanted to play with dark and light colors in the atmosphere to represent the separation of skies or dimensions. The reason I inserted text and named the plane "Untitled Paper" was to create an indefinite and uncertain path for the plane to exist, contributing to an imbalance on the design; there is an imbalance from the plane's placement to give it more attention. Below is my code.

<!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);

background-size: contain;

}

#myCanvas { border: rgba(123,217,248,1.00) medium inset; background-color: rgba(13,15,26,1.00); }

</style>

</head>

<body>

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

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

var grd = context.createLinearGradient(0, 200, 200, 50);

var rGrad = context.createRadialGradient(0, 0, 100, 850, 590, 410);

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

// background color

context.beginPath();

context.fillRect(0,0,850,850);

context.fillStyle = "#02082E";

context.closePath();

// ocean to land gradient

context.beginPath();

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

context.fillStyle = grd;

grd.addColorStop(0, "#004C9E");

grd.addColorStop(0.1, "#1194DD");

grd.addColorStop(0.15, "#FFFFFF");

grd.addColorStop(0.3, "#ECE6BA");

grd.addColorStop(1, "#7E991D");

context.fill();

context.closePath();

// sky gradient

context.beginPath();

rGrad.addColorStop(0, "#FFCA51");

rGrad.addColorStop(0.3, "#E13779");

rGrad.addColorStop(.5, "#112DA4");

rGrad.addColorStop(1, "#A2EFFF");

context.fillStyle = rGrad;

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

context.closePath();

// horizon line

context.beginPath();

context.moveTo(0, 600)

context.lineTo(800, 600)

context.stroke();

// horizon details

context.lineWidth = 2;

context.strokeStyle = "#7D6496";

context.stroke();

context.closePath();

// cloud 1

context.beginPath();

context.moveTo(625, 200);

context.lineTo(350, 200);

context.bezierCurveTo(350,200,350,175,390,175);

context.bezierCurveTo(390,175,360,140,425,145);

context.bezierCurveTo(425,125,450,95,475,135);

context.bezierCurveTo(495,100,545,125,515,145);

context.bezierCurveTo(550,115,600,155,560,175);

context.bezierCurveTo(600,150,610,160,625,200);

context.stroke();

// cloud 1 details

context.lineWidth = 2;

context.fillStyle = "#9FCEED";

context.fill();

context.strokeStyle = "#5A7CD5";

context.stroke();

context.closePath();

// cloud 2

context.beginPath();

context.moveTo(875, 450);

context.lineTo(600, 450);

context.bezierCurveTo(600,450,600,405,640,425);

context.bezierCurveTo(640,425,615,390,675,395);

context.bezierCurveTo(675,375,700,345,745,385);

context.bezierCurveTo(745,350,795,375,765,395);

context.bezierCurveTo(800,365,850,405,810,425);

context.bezierCurveTo(850,400,860,410,875,450);

context.stroke();

// cloud 2 details

context.lineWidth = 2;

context.fillStyle = "#CFF6FF";

context.fill();

context.strokeStyle = "#99E4FA";

context.stroke();

context.closePath();

// star 1

context.beginPath();

context.moveTo(90,385);

context.lineTo(99,393);

context.lineTo(95,400);

context.lineTo(105,395);

context.lineTo(115,400);

context.lineTo(112,392);

context.lineTo(120,385);

context.lineTo(110,385);

context.lineTo(105,375);

context.lineTo(100,385);

context.lineWidth = 0;

context.fillStyle = "#E0B84B";

context.fill();

context.closePath();

// star 2

context.beginPath();

context.moveTo(40,485);

context.lineTo(49,493);

context.lineTo(45,500);

context.lineTo(55,495);

context.lineTo(65,500);

context.lineTo(62,492);

context.lineTo(70,485);

context.lineTo(60,485);

context.lineTo(55,475);

context.lineTo(50,485);

context.lineWidth = 0;

context.fillStyle = "#FFF2A3";

context.fill();

context.closePath();

// star 3

context.beginPath();

context.moveTo(220,545);

context.lineTo(229,553);

context.lineTo(225,560);

context.lineTo(235,555);

context.lineTo(245,560);

context.lineTo(242,552);

context.lineTo(250,545);

context.lineTo(240,545);

context.lineTo(235,535);

context.lineTo(230,545);

context.lineWidth = 0;

context.fillStyle = "#FEFF00";

context.fill();

context.closePath();

// star 4

context.beginPath();

context.moveTo(750,45);

context.lineTo(759,53);

context.lineTo(755,60);

context.lineTo(765,55);

context.lineTo(775,60);

context.lineTo(772,52);

context.lineTo(780,45);

context.lineTo(770,45);

context.lineTo(765,35);

context.lineTo(760,45);

context.lineWidth = 0;

context.fillStyle = "#FEFFBC";

context.fill();

context.closePath();

// little star 1

context.beginPath();

context.moveTo(20,241);

context.lineTo(25,245);

context.lineTo(23,251);

context.lineTo(27,247);

context.lineTo(33,251);

context.lineTo(31,245);

context.lineTo(37,241);

context.lineTo(31,241);

context.lineTo(28,236);

context.lineTo(26,241);

context.lineWidth = 0;

context.fillStyle = "#FEFF00";

context.fill();

context.closePath();

// little star 2

context.beginPath();

context.moveTo(550,41);

context.lineTo(555,45);

context.lineTo(553,51);

context.lineTo(557,47);

context.lineTo(563,51);

context.lineTo(561,45);

context.lineTo(567,41);

context.lineTo(561,41);

context.lineTo(558,36);

context.lineTo(556,41);

context.lineWidth = 0;

context.fillStyle = "#FFE000";

context.fill();

context.closePath();

// create paper plane

// inner shape

context.beginPath();

context.moveTo(475,580);

context.lineTo(450,510);

context.lineTo(150,120);

context.lineTo(500,455);

context.closePath();

context.stroke();

// inner shape details

context.lineWidth = 3;

context.strokeStyle = "#617877";

context.stroke();

context.fillStyle = "#789190";

context.fill();

context.closePath();

// triangle 0

context.beginPath();

context.moveTo(400,530);

context.lineTo(475,580);

context.lineTo(450,510);

context.closePath();

context.stroke();

// triangle 0 details

context.lineWidth = 3;

context.strokeStyle = "#4A5C5A";

context.stroke();

context.fillStyle = "#445553";

context.fill();

context.closePath();

// triangle 1

context.beginPath();

context.moveTo(150,120);

context.lineTo(500,455);

context.lineTo(630,430);

context.closePath();

context.stroke();

// triangle 1 details

context.lineWidth = 3;

context.strokeStyle = "#D7DFDE";

context.stroke();

context.fillStyle = "#D7DFDE";

context.fill();

context.closePath();

// triangle 2

context.beginPath();

context.moveTo(150,120);

context.lineTo(310,660);

context.lineTo(450,510);

context.stroke();

context.closePath();

// triangle 2 details

context.lineWidth = 3;

context.strokeStyle = "#B6C4C3";

context.stroke();

context.fillStyle = "#A0B2B1";

context.fill();

context.closePath();

// untitled text

context.beginPath();

context.font = "12px Courier New";

context.fillStyle = "black";

context.fill();

context.fillText("Untitled", 445, 375);

context.closePath();

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

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

var credits = "Izzi Grniet, Untitled Paper, FMX 210, Fall 2020";

context.beginPath();

context.font = 'bold 18px Arial';

context.fillStyle = "rgba(236,247,255,1.00)";

context.shadowBlur = 4;

context.shadowOffsetX = 1;

context.shadowOffsetY = 1;

context.shadowColor = "#71066C";

context.fillText(credits, 18, 780);

context.closePath();

</script>

</body>

</html>

Search This Blog

Izzi Grniet

My First HTML5 Canvas Graphic

Comments

Post a Comment

Popular Posts

'Letter-To-Myself' Calligram

Illustrator Practice: Self-Logo