HTML5 Canvas Final Project

September 18, 2019

HTML5 Canvas Final Project

This piece was created with HTML5 Canvas. It consists of almost 800 lines of code that took me about 25 hours to write. I drew inspiration from a mosaic-like painting I found online. I decided to code each shape point by point to have as much control as possible. This gave me the ability to carefully manipulate the angle of the shapes, among other features, to ensure the shapes fit closely together and replicated the mosaic style of the original.

I chose to try to replicate the piece that I did because I liked the contrast of the warm, earth tones in the background with the cool, jewel tones of the narwhal. I found it interesting that the original artist didn’t use blues in the background to symbolize water, so I kept the color palette the same. Something I did not decide to replicate, though, was the narwhal’s face. While I liked the original artist’s interpretation, I decided to take my narwhal in a more cartoon direction. He looks more like he belongs in a children’s book, rather than the ocean and I think it’s charming.

Inspiration:

Original Piece

Full Code:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

var x1 = 51 // YRBL top left corner

var y1 = 400

var x2 = 300 // YRBL top right corner

var y2 = 300

var x3 = 350 // YRBL bottom right corner

var y3 = 430

var x4 = 100 // YRBL bottom left corner

var y4 = 530

var x5 = 130 // bottom of canvas left corner

var y5 = 650

var x6 = 53 // YRBL top left corner

var y6 = 405

var x7 = -20 // off-canvas bottom left

var y7 = 650

var x8 = -20 // off-canvas left side

var y8 = 425

var x9 = -20 // off-canvas left side, middle

var y9 = 260

var x10 = 150 // MRMFL top right corner

var y10 = 240

var x11 = 165 // MRMFL bottom right corner

var y11 = 347

var x12 = -20 // off-canvas upper left corner of LRSUP

var y12 = 160

var x13 = 100 // top point of RSUP

var y13 = 110

var x14 = 250 // right corner of RSUP

var y14 = 230

var x15 = -10 // top point of MTTL

var y15 = 10

var x16 = 287 // bottom point of lower side of horn

var y16 = 257

var x17 = 5 // top point of upper side of horn

var y17 = -10

var x18 = 310 // bottom point of upper side of horn

var y18 = 222

var x19 = 225 //top left corner MTAH

var y19 = 150

var x20 = 400 // top right corner MTAH

var y20 = 100

var x21 = 400 // bottom right corner MTAH

var y21 = 222

var x22 = 210 // top right corner YTTL

var y22 = -5

var x23 = 250 //bottom right corner YTTL

var y23 = 143

var x24 = 400 //top right corner of ORAH

var y24 = -10

var x25 = 280 // bottom of MTBL

var y25 = 650

var y31 = 270

var x32 = 450 //top left corner of MTAH

var y32 = 0

var x33 = 500 // point of MTAH

var y33 = 100

var x34 = 550 //top right corner of MTAH

var y34 = 0

var x35 = 670 //point of YTTRC

var y35 = 70

var x36 = 780 // top right corner of YTTRC

var y36 = 0

var x37 = 615 // left corner of OTRC

var y37 = 113

var x38 = 840 // bottom right corner of OTRC

var y38 = 120

var x39 = 810 // top right corner of OTRC

var y39 = -20

var x40 = 550 // bottom right corner of RRAH

var y40 = 200

var x41 = 460 // bottom left corner of RRAH

var y41 = 200

var x42 = 860 //bottom right corner of MRAB

var y42 = 260

var x43 = 550 // bottom left corner of MRAB

var y43 = 260

var x44 = 400 // bottom left corner of YTAH

var y44 = 200

var x45 = 450 // right corner of PT

var y45 = 460

var x46 = 365 //left corner of PT

var y46 = 400

var x47 = 288 // bottom left corner of NTIH

var y47 = 255

var x48 = 400 // point of NTIH

var y48 = 300

var x49 = 360 // top left corner of NTIH

var y49 = 185

var x50 = 365 //point along top of NTIH

var y50 = 183

var x51 = 370 //point along top of NTIH

var y51 = 178

var x52 = 398 //bottom left corner of GSIH

var y52 = 305

var x53 = 500 //bottom right corner of GSIH

var y53 = 250

var x54 = 515 // top right corner of GSIH

var y54 = 170

var x55 = 510 // point along top of GSIH

var y55 = 165

var x56 = 450 // point along top of GSIH

var y56 = 163

var x57 = 615 //right corner of BTIH

var y57 = 215

var x58 = 590 //point along top of BTIH

var y58 = 200

var x59 = 550 //point along top of BTIH

var y59 = 180

var x60 = 665 //top right corner of GLBSIH

var y60 = 250

var x61 = 580 // bottom right corner of GLBSIH

var y61 = 380

var x62 = 465 // bottom left corner of GLBSIH

var y62 = 380

var x63 = 300 //Bottom left corner of BSF

var y63 = 430

var x64 = 250 // left mid point of BSF

var y64 = 330

var x65 = 390// point of GTIC

var y65 = 370

var x66 = 410 // right point of GTIC

var y66 = 490

var x67 = 435 //bottom right point of BSF

var y67 = 350

var x68 = 520 // bottom right corner of LBSIC

var y68 = 450

var x69 = 550 //bottom right corner of NSM

var y69 = 450

var x70 = 750 // right point NTB

var y70 = 260

var x71 = 618 // left point NTB

var y71 = 330

var x72 = 850 //bottom right of LBB

var y72 = 250

var x73 = 830 //bottom left of LBB

var y73 = 400

var x74 = 680 //top left of LBB

var y74 = 300

var x75 = 690 // bottom left GGSR

var y75 = 530

var x76 = 650 //mid point GGSR

var y76 = 490

var x77 = 580 // mid point GGSR

var y77 = 480

var x78 = 510 //bottom left point LBBB

var y78 = 540

var x79 = 510 //midpoint LBBB

var y79 = 480

var x80 = 480 // top left corner LBBB

var y80 = 450

var x81 = 600 //midpoint NSB

var y81 = 560

var x82 = 430 //top left corner of MRMB

var y82 = 480

var x83 = 510 //top right corner of MRMB

var y83 = 520

var x84 = 530 // bottom right corner of MRMB

var y84 = 680

var x85 = 250 //bottom left MRMB

var y85 = 670

var x86 = 530 //point of GTN

var y86 = 450

var x87 = 410 // left point of GTN

var y87 = 470

var x88 = 470 //midpoint of GTN

var y88 = 510

var x89 = 550 //right point of GTN

var y89 = 530

var x90 = 690 // bottom right fin

var y90 = 680

var x91 = 510 //bottom left fin

var y91 = 680

var x92 = 900 //point of LBSBR

var y92 = 600

var x93 = 690 //bottom left point of LBSBR

var y93 = 570

var centerX = 375 //eye

var centerY = 320 //eye

var radius = 9 //eye

var x94 = 260

var y94 = 310

var cpointX = 290

var cpointY = 380

var x95 = 330

var y95 = 360

// Horn

//bottom line

context.beginPath();

context.moveTo(x15,y15)

context.lineTo(x16,y16)

context.lineTo(x18,y18)

context.lineTo(x17,y17)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(39, 83, 208)';

context.fill();

context.stroke();

// Bezier curve in horn

for (var i=3; i<100; i+=30) { //i+=10 controls how far apart lines are

var startX = 1040;

var startY = 800;

// starting point coordinates

var endX = 0;

var endY = -20;

var cpoint1X = 80;

var cpoint1Y = 50;

var cpoint2X = i+10;

var cpoint2Y = 90;

context.beginPath();

context.moveTo(startX, startY); ///cpoint1Y

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1;

context.strokeStyle = "rgb(black)";

context.stroke();

}

// light orange rectangle next to mouth

context.beginPath();

context.moveTo(x16,y16)

context.lineTo(x2,y2)

context.lineTo(x11,y11)

context.lineTo(x10,y10)

context.lineTo(x14,y14)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(255, 176, 87)';

context.fill();

context.stroke();

// Orange Rectangle Above Head

context.beginPath();

context.moveTo(x22,y22)

context.lineTo(x24,y24)

context.lineTo(x20,y20)

context.lineTo(x23,y23)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(232, 77, 13)';

context.fill();

context.stroke();

// Maroon Triangle Top Left

context.beginPath();

context.moveTo(x12,y12)

context.lineTo(x15,y15)

context.lineTo(x13,y13)

context.lineWidth = 8;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

// Red shape, upper left

context.beginPath();

context.moveTo(x9,y9)

context.lineTo(x12,y12)

context.lineTo(x13,y13)

context.lineTo(x14,y14)

context.lineTo(x10,y10)

context.lineWidth = 13;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(168, 31, 41)';

context.fill();

context.stroke();

// Maroon Rectangle Middle Far Left

context.beginPath();

context.moveTo(x8,y8)

context.lineTo(x9,y9)

context.lineTo(x10,y10)

context.lineTo(x11,y11)

context.lineWidth = 15;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

// Orange Rectangle Bottom Left

context.beginPath();

context.moveTo(x5,y5)

context.lineTo(x7,y7)

context.lineTo(x8, y8)

context.lineTo(x1,y1)

context.lineWidth = 15;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(255, 176, 87)';

context.fill();

context.stroke();

// Yellow Rectangle Bottom Left

context.beginPath();

context.moveTo(x1,y1);

context.lineTo(x2,y2);

context.lineTo(x3,y3);

context.lineTo(x4,y4);

context.moveTo(x5,y5);

context.lineTo(x6,y6);

context.lineWidth = 15;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(255, 232, 56)';

context.fill();

context.stroke();

// Maroon Triangle above head

context.beginPath();

context.moveTo(x19,y19)

context.lineTo(x20,y20)

context.lineTo(x21,y21)

context.lineTo(x18,y18)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

// Yellow Triangle Top Left

context.beginPath();

context.moveTo(x17,y17)

context.lineTo(x19,y19)

context.lineTo(x23,y23)

context.lineTo(x22,y22)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(255, 232, 56)';

context.fill();

context.stroke();

// Orange Rectangle Above Head

context.beginPath();

context.moveTo(x22,y22)

context.lineTo(x24,y24)

context.lineTo(x20,y20)

context.lineTo(x23,y23)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(232, 77, 13)';

context.fill();

context.stroke();

// Maroon Triangle Bottom Left

context.beginPath();

context.moveTo(x3,y3)

context.lineTo(x25,y25)

context.lineTo(x5,y5)

context.lineTo(x4,y4)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

//Maroon Triangle Above Head

context.beginPath();

context.moveTo(x32,y32)

context.lineTo(x33,y33)

context.lineTo(x34,y34)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

//Yellow Triangle Top Right Corner

context.beginPath();

context.moveTo(x34,y34)

context.lineTo(x35,y35)

context.lineTo(x36,y36)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(255, 232, 56)';

context.fill();

context.stroke();

//Orange Triangle Above Head

context.beginPath();

context.moveTo(x39,y39)

context.lineTo(x37,y37)

context.lineTo(x38,y38)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(232, 77, 13)';

context.fill();

context.stroke();

// Red Rectangle above head

context.beginPath();

context.moveTo(x34,y34)

context.lineTo(x35,y35)

context.lineTo(x40,y40)

context.lineTo(x41,y41)

context.lineTo(x34,y34)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(168, 31, 41)';

context.fill();

context.stroke();

// Maroon Rectangle Above Back

context.beginPath();

context.moveTo(x37,y37)

context.lineTo(x38,y38)

context.lineTo(x42,y42)

context.lineTo(x43,y43)

context.lineTo(x40,y40)

context.lineTo(x37,y37)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

//Yellow Triangle Above head

context.beginPath();

context.moveTo(x41,y41)

context.lineTo(x44,y44)

context.lineTo(x24,y24)

context.lineTo(x32,y32)

context.lineTo(x33,y33)

context.lineTo(x41,y41)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(255, 232, 56)';

context.fill();

context.stroke();

// Maroon Rectangle Middle Bottom

context.beginPath();

context.moveTo(x82,y82)

context.lineTo(x83,y83)

context.lineTo(x84,y84)

context.lineTo(x85,y85)

context.lineTo(x82,y82)

context.lineWidth = 15;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(140, 49, 54)';

context.fill();

context.stroke();

// Pink Triangle

context.beginPath();

context.moveTo(x25,y25)

context.lineTo(x45,y45)

context.lineTo(x46,y46)

context.lineTo(x25,y25)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(234, 134, 169)';

context.fill();

context.stroke();

//Gray Shape In head

context.beginPath();

context.moveTo(x49,y49)

context.lineTo(x52,y52)

context.lineTo(x53,y53)

context.lineTo(x54,y54)

context.lineTo(x55,y55)

context.lineTo(x56,y56)

context.lineTo(x49,y49)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(199, 194, 199)';

context.fill();

context.stroke();

//Gray Triangle Neck

context.beginPath();

context.moveTo(x86,y86)

context.lineTo(x87,y87)

context.lineTo(x88,y88)

context.lineTo(x89,y89)

context.lineTo(x86,y86)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(199, 194, 199)';

context.fill();

context.stroke();

//Navy Triangle In head

context.beginPath();

context.moveTo(x47,y47)

context.lineTo(x48,y48)

context.lineTo(x49,y49)

context.lineTo(x50,y50)

context.lineTo(x51,y51)

context.lineTo(x47,y47)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(43, 46, 94)';

context.fill();

context.stroke();

//Blue Triangle In head

context.beginPath();

context.moveTo(x54,y54)

context.lineTo(x53,y53)

context.lineTo(x57,y57)

context.lineTo(x58,y58)

context.lineTo(x59,y59)

context.lineTo(x54,y54)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(39, 83, 208)';

context.fill();

context.stroke();

//Giant Light Blue Shape in Head

context.beginPath();

context.moveTo(x52,y52)

context.lineTo(x53,y53)

context.lineTo(x57,y57)

context.lineTo(x60,y60)

context.lineTo(x61,y61)

context.lineTo(x62,y62)

context.lineTo(x52,y52)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(65, 152, 196)';

context.fill();

context.stroke();

//Blue Shape Face

context.beginPath();

context.moveTo(x47,y47)

context.lineTo(x48,y48)

context.lineTo(x67,y67)

context.lineTo(x63,y63)

context.lineTo(x64,y64)

context.lineTo(x47,y47)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(39, 83, 208)';

context.fill();

context.stroke();

//Gray Triangle In Chin

context.beginPath();

context.moveTo(x63,y63)

context.lineTo(x65,y65)

context.lineTo(x66,y66)

context.lineTo(x63,y63)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(199, 194, 199)';

context.fill();

context.stroke();

//Light Blue Shape in Chin

context.beginPath();

context.moveTo(x67,y67)

context.lineTo(x65,y65)

context.lineTo(x66,y66)

context.lineTo(x68,y68)

context.lineTo(x62,y62)

context.lineTo(x67,y67)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(65, 152, 196)';

context.fill();

context.stroke();

// Head Arc

context.beginPath();

context.arc(470,400,240,1.228571428*Math.PI, 1.714285715*Math.PI,false);

context.lineWidth=10

context.strokeStyle="rgb(black)"

context.stroke();

//Navy Shape Middle

context.beginPath();

context.moveTo(x62,y62)

context.lineTo(x68,y68)

context.lineTo(x69,y69)

context.lineTo(x61,y61)

context.lineTo(x62,y62)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(43, 46, 94)';

context.fill();

context.stroke();

//Navy Triangle Back

context.beginPath();

context.moveTo(x60,y60)

context.lineTo(x70,y70)

context.lineTo(x71,y71)

context.lineTo(x60,y60)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(43, 46, 94)';

context.fill();

context.stroke();

//Light Blue Shape in Back

context.beginPath();

context.moveTo(x70,y70)

context.lineTo(x72,y72)

context.lineTo(x73,y73)

context.lineTo(x74,y74)

context.lineTo(x70,y70)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(65, 152, 196)';

context.fill();

context.stroke();

//Giant Gray Shape Right

context.beginPath();

context.moveTo(x71,y71)

context.lineTo(x74,y74)

context.lineTo(x73,y73)

context.lineTo(x75,y75)

context.lineTo(x76,y76)

context.lineTo(x77,y77)

context.lineTo(x69,y69)

context.lineTo(x61,y61)

context.lineTo(x71,y71)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(199, 194, 199)';

context.fill();

context.stroke();

//Light blue bottom body

context.beginPath();

context.moveTo(x77,y77)

context.lineTo(x69,y69)

context.lineTo(x68,y68)

context.lineTo(x80,y80)

context.lineTo(x79,y79)

context.lineTo(x78,y78)

context.lineTo(x77,y77)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(65, 152, 196)';

context.fill();

context.stroke();

//Navy Shape Bottom

context.beginPath();

context.moveTo(x78,y78)

context.lineTo(x77,y77)

context.lineTo(x76,y76)

context.lineTo(x75,y75)

context.lineTo(x81,y81)

context.lineTo(x78,y78)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(43, 46, 94)';

context.fill();

context.stroke();

// Pink shape bottom

context.beginPath();

context.moveTo(x93,y93)

context.lineTo(x92,y92)

context.lineTo(x91,y91)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(234, 134, 169)';

context.fill();

context.stroke();

// Turquoise Fin

context.beginPath();

context.moveTo(x78,y78)

context.lineTo(x75,y75)

context.lineTo(x90,y90)

context.lineTo(x91,y91)

context.lineTo(x78,y78)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'square';

context.fillStyle = 'rgb(136, 219, 254)';

context.fill();

context.stroke();

//Light blue bottom body

context.beginPath();

context.moveTo(x75,y75)

context.lineTo(x73,y73)

context.lineTo(x92,y92)

context.lineTo(x93,y93)

context.lineTo(x75,y75)

context.lineWidth = 10;

context.strokeStyle = 'rgb(black)';

context.lineCap = 'round';

context.fillStyle = 'rgb(65, 152, 196)';

context.fill();

context.stroke();

// Eye

context.beginPath();

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

context.fillStyle = 'black';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'black';

context.stroke();

//Mouth

context.beginPath();

context.moveTo(x94, y94);

context.quadraticCurveTo(cpointX, cpointY, x95, y95);

context.lineWidth = 5;

context.strokeStyle = "rgb(black)";

context.stroke();

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

};

</script>

</head>

<body>

</body>

</html>

Comments

UnknownDecember 3, 2019 at 7:15 AM
You are very creative and I like your intricate designs and color combinations.
ReplyDelete
Replies

Add comment

Search This Blog

Digital Media

HTML5 Canvas Final Project

Comments

Post a Comment

Popular Posts

Final Portfolio

Turning into a Puppet