Lion Head Canvas
For this project, I knew immediately that I wanted to do a geometric design of an animal, but I wasn't sure where to go from there. I searched around for geometric heads to base the design off of, and eventually I found one in black and white. After I found it, I immediately thought about how I wanted a psychedelic themed background with a realistic colored mane, and that is exactly what I did. I have never coded anything before this in my life, so this took me over 40 hours to complete. In the very beginning, this seemed like an eternity, but after I got the hang of it I ended up enjoying coding and seeing the progress as I went along. This project was around 1800 lines total, and it came out exactly how I wanted it to. While this is a complicated and long way when I could have drawn something very similar to it in Illustrator in hours, this project was literally pixel perfect, and that is hard to replicate. This took me the longest out of any project that I have done, but the end results were worth it.
Inspired by Hoagard at https://us.hoagard.co/products/metal-wall-art-lion-head?_pos=2&_sid=33a8d2c00&_ss=r
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> Final Canvas </title>
<!-- import external .js scripts here -->
<!-- <script type="text/javascript" src="#" ></script> -->
<!-- modify CSS properties here -->
<style type="text/css">
body,td,th {
font-family: Monaco, "Courier New", "monospace";
font-size: 14px;
color: rgba(255,255,255,1);
}
body {
background-color: rgba(0,0,0,1);
}
#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;
}
#fmxCanvas {
position: relative;
background-color:rgba(255,255,255,1);
border: rgba(255,255,255,1) thin dashed;
cursor: crosshair;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<!-- START HTML CODE HERE -->
<canvas id="fmxCanvas" width="800" height="800"></canvas>
<div id="display"></div>
Inspired by Hoagard at https://us.hoagard.co/products/metal-wall-art-lion-head?_pos=2&_sid=33a8d2c00&_ss=r
<img src="Lion Head Geometric.jpg" width="800" height="800" id="lion" alt="Lion Head Geometric.jpg" />
<!-- FINISH HTML CODE HERE -->
</div>
<script>
///////////////////////////////////////////////////////////////////////
// DECLARE requestAnimFrame
var rAF = window.requestAnimFrame ||
window.mozRequestAnimFrame ||
window.webkitRequestAnimFrame ||
window.msRequestAnimFrame;
var fps = 30;
window.requestAnimFrame = (
function(callback) {
return rAF ||
function(callback) {
window.setTimeout(callback, 1000 / fps);
};
})();
///////////////////////////////////////////////////////////////////////
// DEFINE GLOBAL VARIABLES HERE
var canvas;
var context;
canvas = document.getElementById("fmxCanvas");
context = canvas.getContext("2d");
var canvas1;
var context1;
canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;
var display;
display = document.getElementById('display');
var counter;
///////////////////////////////////////////////////////////////////////
// DEFINE YOUR GLOBAL VARIABLES HERE
var lion = new Image();
lion = document.getElementById('lion');
///////////////////////////////////////////////////////////////////////
// CALL THE EVENT LISTENERS
window.addEventListener("load", setup, false);
//////////////////////////////////////////////////////////////////////
// ADD EVENT LISTENERS
canvas.addEventListener("mousemove", mousePos, false);
//////////////////////////////////////////////////////////////////////
// MOUSE COORDINATES
var stage, mouseX, mouseY;
function mousePos(event) {
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
}
/////////////////////////////////////////////////////////////////////
// INITIALIZE THE STARTING FUNCTION
function setup() {
/////////////////////////////////////////////////////////////////////
// DECLARE STARTING VALUES OF GLOBAL VARIABLES
counter = 0;
mouseX = canvas.width/2;
mouseY = canvas.height/2;
/////////////////////////////////////////////////////////////////////
// CALL SUBSEQUENT FUNCTIONS, as many as you need
clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS
draw(); // THIS IS WHERE EVERYTHING HAPPENS
}
////////////////////////////////////////////////////////////////////
// CLEAR THE CANVAS FOR ANIMATION
// USE THIS AREA TO MODIFY BKGD
function clear() {
context.clearRect(0,0,canvas.width, canvas.height);
context1.clearRect(0,0,canvas.width, canvas.height);
// clear additional contexts here if you have more than canvas1
}
////////////////////////////////////////////////////////////////////
// THIS IS WHERE EVERYTHING HAPPENS
function draw() {
counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS
if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER
clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS
////////////////////////////////////////////////////////////////////
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE
//context.drawImage(lion,52, 0);
//BACKGROUND
var mygrad = context.createLinearGradient (400,0,45,400);
mygrad.addColorStop(0, "rgba(0,0,247,1)");
mygrad.addColorStop(0.2, "rgba(108,0,247,1)");
mygrad.addColorStop(0.4, "rgba(187,0,247,1)");
mygrad.addColorStop(.65, "rgba(247,0,214,1)");
mygrad.addColorStop(1, "rgba(247,0,162,1)");
context.beginPath();
context.rect(0,0,800,800);
context.closePath();
context.fillStyle = mygrad;
context.fill();
//FACE GRADIENT
var mygrad3 = context.createRadialGradient(400,350,50,400,400,400);
mygrad3.addColorStop(0, "rgba(177,109,18,1.00)" );
mygrad3.addColorStop(0.3, "rgba(198,148,82,1.00)" );
mygrad3.addColorStop(1, "rgba(208,197,184,1.00)" );
//CHIN GRADIENT
var mygrad4 = context.createRadialGradient(395,500,65,395,400,500);
mygrad4.addColorStop(0, "rgba(218,192,159,1.00)" );
mygrad4.addColorStop(0.05, "rgba(209,175,128,1.00)" );
mygrad4.addColorStop(0.1, "rgba(207,151,72,1.00)" );
//CHEEK GRADIENTS
var mygrad5 = context.createRadialGradient(395,500,65,395,400,500);
mygrad5.addColorStop(0, "rgba(218,192,159,1.00)" );
mygrad5.addColorStop(0.3, "rgba(209,175,128,1.00)" );
mygrad5.addColorStop(1, "rgba(207,151,72,1.00)" );
//NOSE GRADIENT
var mygrad6 = context.createLinearGradient(340,489,450,491);
mygrad6.addColorStop(0.25, "rgba(20,9,0,1.00)");
mygrad6.addColorStop(0.5,"rgba(83,45,14,1.00)")
mygrad6.addColorStop(0.75, "rgba(20,9,0,1.00)");
//ABOVE BLACK CHIN
context.beginPath();
context.bezierCurveTo(314,549,400,400,482,549);
context.bezierCurveTo(482,549,395,700,314,549);
context.strokeStyle = "black"
context.stroke();
context.fillStyle = mygrad4;
context.fill();
//BLACK CHIN
context.beginPath();
context.rect(300,566,152,100);
context.closePath();
context.fillStyle = "black"
context.fill();
//CHIN
context.beginPath();
context.bezierCurveTo(308,427,285,480,303,497);
context.bezierCurveTo(303,497,320,510,326,530);
context.bezierCurveTo(326,530,395,490,469,534);
context.bezierCurveTo(469,534,465,510,485,511);
context.bezierCurveTo(485,511,510,480,500,455);
context.bezierCurveTo(500,455,500,420,442,392);
context.lineTo(290,392);
context.closePath();
context.lineWidth = 15;
context.strokeStyle = "black"
context.stroke();
context.fillStyle = mygrad4;
context.fill();
//BLACK UNDER NOSE
context.beginPath();
context.bezierCurveTo(327,415,360,430,362,466);
context.bezierCurveTo(362,466,395,495,437,466);
context.bezierCurveTo(437,466,440,430,463,415);
context.closePath();
context.lineWidth = 15;
context.strokeStyle = "black"
context.stroke();
context.fillStyle = "black"
context.fill();
//NOSE
context.beginPath();
context.bezierCurveTo(330,415,393,485,475,405);
context.bezierCurveTo(455,425,400,300,330,418);
context.lineWidth = 0;
context.strokeStyle = "black"
context.stroke();
context.fillStyle = mygrad6;
context.fill();
//ABOVE NOSE
context.beginPath();
context.bezierCurveTo(338,418,345,446,397,410);
context.bezierCurveTo(397,410,441,446,455,421);
context.lineTo(430,232);
context.lineTo(333,232)
context.lineWidth = 15;
context.strokeStyle = "black"
context.stroke();
context.fillStyle = mygrad3
context.fill();
//LEFT CHEEK
context.beginPath();
context.moveTo(292,330);
context.lineTo(200,330);
context.lineTo(290,470);
context.closePath();
context.fillStyle = mygrad5;
context.fill();
//RIGHT CHEEK
context.beginPath();
context.moveTo(575,308);
context.lineTo(485,397);
context.lineTo(516,520);
context.lineTo(625,328);
context.fillStyle = mygrad5;
context.fill();
//BLACK MANE
context.beginPath();
context.moveTo(185,108);
context.lineTo(170,270);
context.lineTo(596,270);
context.lineTo(650,128);
context.lineTo(529,78);
context.closePath();
context.fillStyle = "black";
context.fill();
//OUTSIDE OF LEFT EYE
context.beginPath();
context.bezierCurveTo(301,231,258,231,235,260);
context.lineTo(255,342);
context.lineTo(288,401);
context.quadraticCurveTo(288,401,292,460);
context.bezierCurveTo(292,460,300,410,331,416);
context.lineTo(369,330);
context.quadraticCurveTo(369,330,356,300);
context.closePath();
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = mygrad3;
context.fill();
//OUTSIDE OF RIGHT EYE
context.beginPath();
context.bezierCurveTo(500,234,550,240,568,273);
context.quadraticCurveTo(568,273,540,352);
context.lineTo(510,401);
context.quadraticCurveTo(510,401,502,460);
context.bezierCurveTo(502,460,491,411,460,416);
context.lineTo(430,330);
context.quadraticCurveTo(430,330,445,304);
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = mygrad3;
context.fill();
//FACE TOP LEFT
context.beginPath();
context.bezierCurveTo(366,200,306,140,272,224);
context.quadraticCurveTo(272,224,322,271);
context.lineTo(359,297);
context.bezierCurveTo(359,297,416,245,366,200);
context.closePath();
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = mygrad3;
context.fill();
//FACE TOP RIGHT
context.beginPath();
context.bezierCurveTo(433,214,480,140,535,218);
context.quadraticCurveTo(535,218,484,271);
context.lineTo(442,299);
context.bezierCurveTo(442,299,390,275,440,203);
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = mygrad3;
context.fill();
//FUR GRADIENT
var mygrad2 = context.createRadialGradient(400, 350, 50, 400, 400, 400);
mygrad2.addColorStop(0.3, "rgba(20,9,1,1.00)" );
mygrad2.addColorStop(0.5, "rgba(138,73,0,1.00)" );
mygrad2.addColorStop(0.8, "rgba(177,109,18,1.00)" );
mygrad2.addColorStop(1, "rgba(198,148,82,1.00)" );
//MANE TOP
context.beginPath();
context.moveTo(293,37);
context.lineTo(214,50);
context.lineTo(246,95);
context.lineTo(296,112);
context.lineTo(320,161);
context.bezierCurveTo(320,161,345,160,356,167);
context.bezierCurveTo(356,167,400,120,450,169);
context.bezierCurveTo(450,169,465,158,483,164);
context.lineTo(510,116);
context.lineTo(560,100);
context.lineTo(590,54);
context.lineTo(516,44);
context.closePath();
context.lineWidth = 15;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = mygrad2;
context.fill();
//MANE V SHAPE
context.beginPath();
context.moveTo(367,25);
context.lineTo(251,12);
context.bezierCurveTo(251,12,286,28,306,45);
context.bezierCurveTo(306,45,350,160,387,261);
context.bezierCurveTo(391,270,402,280,415,260);
context.bezierCurveTo(415,270,450,150,501,51);
context.bezierCurveTo(501,51,517,30,566,16);
context.lineTo(444,25);
context.lineTo(402,90);
context.lineTo(367,25);
context.closePath();
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE TOP LEFT
context.beginPath();
context.moveTo(110,214);
context.lineTo(195,209);
context.lineTo(286,189);
context.bezierCurveTo(286,189,300,150,292,115);
context.bezierCurveTo(292,115,225,85,208,84);
context.bezierCurveTo(208,84,175,97,150,125);
context.closePath();
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE TOP RIGHT
context.beginPath();
context.moveTo(693,223);
context.lineTo(655,131);
context.bezierCurveTo(655,131,638,102,603,84);
context.bezierCurveTo(603,84,560,100,514,118);
context.lineTo(515,182);
context.bezierCurveTo(515,182,564,206,608,214);
context.closePath();
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE UNDER CHIN
context.beginPath();
context.moveTo(353,732);
context.lineTo(394,682);
context.lineTo(441,732);
context.bezierCurveTo(441,748,460,640,437,613);
context.bezierCurveTo(447,613,407,590,396,624);
context.bezierCurveTo(396,624,380,590,354,614);
context.quadraticCurveTo(354,614,353,732);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE MID LEFT
context.beginPath();
context.moveTo(146,410);
context.lineTo(127,427);
context.quadraticCurveTo(127,427,120,516);
context.lineTo(169,458);
context.lineTo(138,580);
context.quadraticCurveTo(138,580,248,411);
context.bezierCurveTo(248,411,230,370,246,336);
context.lineTo(235,265);
context.closePath();
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE BOTTOM LEFT
context.beginPath();
context.bezierCurveTo(301,497,326,502,327,544);
context.lineTo(341,556);
context.quadraticCurveTo(341,556,355,615);
context.bezierCurveTo(355,615,350,680,352,787);
context.lineTo(314,768);
context.bezierCurveTo(314,768,302,730,256,699);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE BOTTOM-MID LEFT
context.beginPath();
context.moveTo(245,401);
context.lineTo(290,461);
context.bezierCurveTo(290,461,294,495,298,494);
context.quadraticCurveTo(303,499,298,616);
context.lineTo(256,696);
context.lineTo(253,740);
context.lineTo(212,668);
context.lineTo(190,695);
context.lineTo(180,632);
context.lineTo(171,660);
context.lineTo(151,563);
context.closePath();
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE MID TOP LEFT
context.beginPath();
context.bezierCurveTo(148,214,130,180,91,399);
context.lineTo(143,380);
context.lineTo(143,413);
context.bezierCurveTo(143,413,220,372,233,259);
context.lineTo(200,270);
context.lineTo(254,224);
context.lineTo(141,212);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE BOTTOM RIGHT
context.beginPath();
context.moveTo(535,698);
context.bezierCurveTo(535,698,487,731,474,769);
context.lineTo(435,788);
context.bezierCurveTo(435,788,454,643,437,614);
context.quadraticCurveTo(437,614,450,557);
context.lineTo(465,545);
context.bezierCurveTo(467,545,465,509,490,503);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE BOTTOM-MID RIGHT
context.beginPath();
context.moveTo(546,411);
context.lineTo(501,468);
context.bezierCurveTo(501,468,505,500,491,503);
context.quadraticCurveTo(491,503,493,614);
context.lineTo(533,701);
context.lineTo(535,737);
context.lineTo(579,674);
context.lineTo(599,700);
context.lineTo(611,633);
context.lineTo(617,660);
context.lineTo(640,566);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE MID RIGHT
context.beginPath();
context.moveTo(652,420);
context.lineTo(670,438);
context.quadraticCurveTo(670,438,672,514);
context.lineTo(632,473);
context.lineTo(655,590);
context.quadraticCurveTo(655,590,546,411);
context.bezierCurveTo(546,411,570,380,551,331);
context.lineTo(565,265);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//MANE MID TOP RIGHT
context.beginPath();
context.bezierCurveTo(655,220,700,275,708,414);
context.lineTo(657,385);
context.lineTo(654,421);
context.bezierCurveTo(654,421,560,370,570,270);
context.lineTo(606,277);
context.lineTo(543,228);
context.lineTo(655,220);
context.lineWidth = 8;
context.fillStyle = mygrad2;
context.fill();
context.strokeStyle = "black";
context.stroke();
//CHIN LINES
context.beginPath();
context.moveTo(342,557);
context.lineTo(369,577);
context.lineTo(426,577);
context.lineTo(449,558);
context.strokeStyle = "black";
context.stroke();
//LIP
context.beginPath();
context.bezierCurveTo(370,520,395,530,427,521);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//DIAMOND INSIDE V
context.beginPath();
context.moveTo(402,88);
context.lineTo(355,175);
context.quadraticCurveTo(355,175,402,200);
context.quadraticCurveTo(407,200,443,175);
context.lineTo(402,88);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = "black";
context.fill();
//NOSE LINE
context.beginPath();
context.quadraticCurveTo(360,361,397,340);
context.quadraticCurveTo(397,340,438,362);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//LEFT TOP MANE LINE
context.beginPath();
context.quadraticCurveTo(208,84,230,147);
context.quadraticCurveTo(230,147,288,186);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//RIGHT TOP MANE LINE
context.beginPath();
context.quadraticCurveTo(603,84,575,152);
context.quadraticCurveTo(575,152,510,188);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//LEFT TOP FACE LINE
context.beginPath();
context.quadraticCurveTo(319,274,299,179);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//RIGHT TOP FACE LINE
context.beginPath();
context.quadraticCurveTo(480,277,505,176);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//MANE MID TOP LEFT LINES
context.beginPath();
context.moveTo(140,381);
context.lineTo(185,279);
context.quadraticCurveTo(185,279,201,269);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(123,259,150,250,187,240);
context.bezierCurveTo(187,240,215,230,236,242);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//MANE MID TOP RIGHT LINES
context.beginPath();
context.moveTo(658,385);
context.bezierCurveTo(658,385,630,280,607,278);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(680,266,580,230,567,247);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//MANE MID LEFT LINES
context.beginPath();
context.bezierCurveTo(192,367,200,359,242,369);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(166,465);
context.lineTo(239,365);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(225,367);
context.lineTo(242,395);
context.lineTo(237,370);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = "black"
context.fill();
//MANE MID RIGHT LINES
context.beginPath();
context.bezierCurveTo(559,375,586,364,603,377)
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(637,479);
context.lineTo(560,382);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(549,408);
context.lineTo(567,389);
context.lineTo(562,375);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//LEFT BOTTOM MANE LINES
context.beginPath();
context.moveTo(341,555);
context.lineTo(312,651);
context.bezierCurveTo(312,651,280,730,317,770);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(320,631);
context.lineTo(300,613);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//RIGHT BOTTOM MANE LINES
context.beginPath();
context.moveTo(452,555);
context.lineTo(479,657);
context.bezierCurveTo(479,657,500,710,476,764);
context.lineWidth = 8
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(471,633);
context.lineTo(495,610);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//LEFT BOTTOM MIDDLE MANE LINES
context.beginPath();
context.moveTo(255,707);
context.lineTo(252,513);
context.bezierCurveTo(252,513,264,494,291,464);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(254,591);
context.lineTo(299,545);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(172,649);
context.lineTo(201,515);
context.quadraticCurveTo(201,515,282,449);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(216,675);
context.lineTo(180,612);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(251,512);
context.lineTo(237,488);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//RIGHT BOTTOM MIDDLE MANE
context.beginPath();
context.moveTo(537,731);
context.lineTo(542,518);
context.bezierCurveTo(542,518,535,503,508,464);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(540,599);
context.lineTo(492,545);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(614,644);
context.lineTo(593,521);
context.quadraticCurveTo(593,521,517,450);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(575,680);
context.lineTo(610,620);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(543,517);
context.lineTo(558,493);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//MOUTH LINES
context.beginPath();
context.moveTo(298,464);
context.lineTo(307,465);
context.lineTo(296,469);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(498,464);
context.lineTo(489,465);
context.lineTo(500,469);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(312,505);
context.lineTo(325,498);
context.lineTo(321,515);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(488,503);
context.lineTo(473,498);
context.lineTo(478,510);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//OUTSIDE LEFT EYE LINES
context.beginPath();
context.bezierCurveTo(240,254,274,286,320,271);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(275,272,290,300,258,350);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(275,274);
context.lineTo(288,325);
context.bezierCurveTo(288,325,330,330,360,355);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(363,303,345,300,342,310);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(360,347,340,270,295,295);
context.bezierCurveTo(295,295,360,330,360,355);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.bezierCurveTo(326,338,330,390,310,428);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
//OUTSIDE RIGHT EYE LINES
context.beginPath();
context.bezierCurveTo(562,259,535,286,487,275);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(529,274,513,309,543,352);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.moveTo(529,274);
context.lineTo(511,329);
context.bezierCurveTo(511,329,466,328,439,365);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(472,339,466,389,486,433);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(441,303,460,300,463,314);
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
context.bezierCurveTo(434,349,460,272,505,297);
context.bezierCurveTo(505,297,440,332,437,355);
context.closePath();
context.lineWidth = 8;
context.strokeStyle = "black";
context.stroke();
context.fillStyle = "black";
context.fill();
//FINAL DETAILS
context.beginPath();
context.moveTo(232,145);
context.lineTo(114,211);
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.moveTo(578,152);
context.lineTo(691,220);
context.stroke();
context.fillStyle = "black";
context.fill();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Raymond Silk, Geometric Lion Head, FMX 210, SP 2021";
context.font = 'bold 12px Helvetica';
context.fillStyle = "rgba(0,0,0,1)"; // change the color here
context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
context.shadowBlur = 12;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
context.restore();
//////////////////////////////////////////////////////////////////
// HTML DISPLAY FIELD FOR TESTING PURPOSES
display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);
/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION
requestAnimFrame(draw); // CALLS draw() every nth of a second
}
</script>
</body>
</html>
Comments
Post a Comment