Canvas Project

CREATED WITH CODE

REFERENCE PHOTO

This artwork is made of my own original design. I call her "Demon Girl." I made her using Adobe Dreamweaver. It is made entirely of code using quadratic curves, bezier curves, lines, and ellipses. Learning code was actually very enjoyable to me. It taught me to be very mindful of how to stack layers.

<!doctype html>

<html>

<head>

<title> DEMON GIRL </title>

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;

margin: 10px;

cursor: crosshair;

display: inline-block;

}

</style>

</head>

<body>

Add your personal notes or additional information here

</div>

///////////////////////////////////////////////////////////////////////

// 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 ctx;

canvas = document.getElementById("fmxCanvas");

ctx = canvas.getContext("2d");

var canvas1;

var ctx1;

canvas1 = document.createElement("canvas");

ctx1 = canvas1.getContext("2d");

canvas1.width = canvas.width;

canvas1.height = canvas.height;

var canvas2;

var ctx2;

canvas2 = document.createElement("canvas");

ctx2 = canvas2.getContext("2d");

canvas2.width = canvas.width;

canvas2.height = canvas.height;

var display;

display = document.getElementById('display');

var counter;

///////////////////////////////////////////////////////////////////////

// DEFINE YOUR GLOBAL VARIABLES HERE

var dg = new Image();

dg = document.getElementById("dg")

///////////////////////////////////////////////////////////////////////

// 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() {

ctx.clearRect(0,0,canvas.width, canvas.height);

ctx1.clearRect(0,0,canvas.width, canvas.height);

ctx2.clearRect(0,0,canvas.width, canvas.height);

// clear additional ctxs 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

ctx.drawImage(dg,0,0, canvas.width, canvas.height);

//background

ctx.beginPath();

ctx.rect(0,0,600,800);

ctx.closePath();

ctx.fillStyle = "rgba(89,89,108,1.00)"

ctx.fill();

//background dots Left and down and around

ctx.beginPath();

ctx.moveTo(10,0)

ctx.quadraticCurveTo(20,6,20,54)

ctx.lineTo(0,62)

ctx.lineTo(0,0)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(61,113,8,14,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(101,139,9,17,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(32,164,5,10,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(99,166)

ctx.quadraticCurveTo(109,176,105,196)

ctx.lineTo(116,214)

ctx.quadraticCurveTo(116,238,114,240)

ctx.quadraticCurveTo(100,240,91,232)

ctx.quadraticCurveTo(87,214,91,196)

ctx.quadraticCurveTo(89,170,99,166)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(32,247)

ctx.lineTo(64,270)

ctx.quadraticCurveTo(60,287,48,299)

ctx.quadraticCurveTo(34,301,22,284)

ctx.quadraticCurveTo(15,255,32,247)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(74,286)

ctx.lineTo(95,277)

ctx.quadraticCurveTo(102,293,91,311)

ctx.quadraticCurveTo(75,313,73,304)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(127,325,5,10,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(0,396);

ctx.lineTo(10,408);

ctx.lineTo(10,447);

ctx.lineTo(0,452);

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(84,423);

ctx.lineTo(97,425);

ctx.lineTo(122,479);

ctx.lineTo(90,505);

ctx.quadraticCurveTo(76,470,84,423)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(33,507,6,13,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(70,505);

ctx.quadraticCurveTo(84,520,75,543)

ctx.lineTo(62,535);

ctx.quadraticCurveTo(58,505,70,505)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(257,584);

ctx.quadraticCurveTo(269,572,283,571);

ctx.lineTo(293,603);

ctx.lineTo(256,614);

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(178,622,8,12,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(123,629,5,13,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(163,671,4,11,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(42,687);

ctx.lineTo(57,695);

ctx.lineTo(54,719);

ctx.lineTo(40,725);

ctx.quadraticCurveTo(30,705,42,687)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(151,727);

ctx.quadraticCurveTo(161,718,170,733)

ctx.quadraticCurveTo(176,750,170,766)

ctx.lineTo(153,756);

ctx.quadraticCurveTo(148,742,151,727)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(127,800);

ctx.quadraticCurveTo(125,789,141,780)

ctx.quadraticCurveTo(146,787,142,800)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(288,713,8,11,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(338,785,6,12,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(369,786,5,11,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(419,800);

ctx.quadraticCurveTo(419,787,428,789)

ctx.quadraticCurveTo(439,766,447,800)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(477,711);

ctx.lineTo(490,709);

ctx.lineTo(492,733)

ctx.quadraticCurveTo(473,737,477,712)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(386,704);

ctx.lineTo(407,686);

ctx.quadraticCurveTo(424,704,406,716)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(441,664);

ctx.quadraticCurveTo(452,645,463,651)

ctx.quadraticCurveTo(477,665,465,688)

ctx.quadraticCurveTo(434,685,441,664)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(555,586,5,8,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(476,573);

ctx.quadraticCurveTo(487,574,477,595)

ctx.quadraticCurveTo(466,575,476,573)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(415,559);

ctx.lineTo(424,559)

ctx.quadraticCurveTo(430,576,417,596)

ctx.quadraticCurveTo(399,586,415,559)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(347,561);

ctx.quadraticCurveTo(355,530,359,561);

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(359,549);

ctx.quadraticCurveTo(358,522,364,520);

ctx.quadraticCurveTo(370,520,373,529);

ctx.lineTo(375,552);

ctx.quadraticCurveTo(367,556,359,549)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(441,350,10,15,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(504,376,13,15,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(555,258);

ctx.quadraticCurveTo(571,257,574,284);

ctx.quadraticCurveTo(557,300,539,301);

ctx.quadraticCurveTo(525,303,530,284);

ctx.quadraticCurveTo(542,260,555,258);

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(478,203);

ctx.quadraticCurveTo(499,190,492,229);

ctx.quadraticCurveTo(475,240,478,203);

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(552,192,8,16,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(454,137,10,20,0.2,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(526,120,10,15,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(307,12,5,15,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(427,14,11,18,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

ctx.beginPath();

ctx.moveTo(540,12);

ctx.quadraticCurveTo(552,-9,558,6);

ctx.quadraticCurveTo(561,18,558,29);

ctx.quadraticCurveTo(555,31,541,32);

ctx.closePath();

ctx.fillStyle = "rgba(214, 202, 182,1)"

ctx.fill();

//horns

//left

ctx.beginPath();

ctx.moveTo(169,152);

ctx.quadraticCurveTo(179,138,192, 134);

ctx.quadraticCurveTo(152,126,174, 68);

ctx.quadraticCurveTo(121,124,169, 152);

ctx.closePath();

ctx.fillStyle = "rgba(109,11,0,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//right

ctx.beginPath();

ctx.moveTo(408,132);

ctx.quadraticCurveTo(421,137,430, 151);

ctx.quadraticCurveTo(480,112,434, 74);

ctx.quadraticCurveTo(449,106,408, 132);

ctx.closePath();

ctx.fillStyle = "rgba(109,11,0,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

var fc4 = ctx.createRadialGradient(300,600, 50, 300, 300, 200);

fc4.addColorStop(0, "rgba(253,168,161,1.00)")

fc4.addColorStop(0.5, "rgba(254,129,111,1.00)")

fc4.addColorStop(1, "rgba(221,76,57,1.00)")

//neck

ctx.beginPath();

ctx.moveTo(269,617);

ctx.quadraticCurveTo(285,516, 249,508);

ctx.quadraticCurveTo(297,461, 346,508);

ctx.quadraticCurveTo(322,556, 343,617);

ctx.quadraticCurveTo(312,660,269,617)

ctx.closePath();

ctx.fillStyle = fc4;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//neck shading

ctx.beginPath();

ctx.moveTo(268,522);

ctx.quadraticCurveTo(276,558, 305,555);

ctx.quadraticCurveTo(324,554, 333,543);

ctx.quadraticCurveTo(333,534, 342,516);

ctx.quadraticCurveTo(286,449, 268,522);

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//shirt

ctx.beginPath();

ctx.moveTo(272,598);

ctx.lineTo(151,647);

ctx.quadraticCurveTo(285,799,463,663)

ctx.lineTo(338,598)

ctx.quadraticCurveTo(316,654,272,598);

ctx.closePath();

ctx.fillStyle = "rgba(89,23,35,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//ribbons

//ribbon left

ctx.beginPath();

ctx.moveTo(169,358);

ctx.quadraticCurveTo(103,288,44,344);

ctx.quadraticCurveTo(120,326,169,358)

ctx.closePath();

ctx.fillStyle = "rgba(109,11,0,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//ribbon right

ctx.beginPath();

ctx.moveTo(427,361);

ctx.quadraticCurveTo(504,277,569,351);

ctx.quadraticCurveTo(510,308,427,361)

ctx.closePath();

ctx.fillStyle = "rgba(109,11,0,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

var bc = ctx.createRadialGradient(190,431, 1, 200, 100, 400);

bc.addColorStop(0, "rgba(196,155,151,1.00)")

bc.addColorStop(0.5, "rgba(169,120,113,1.00)")

bc.addColorStop(1, "rgba(142,95,85,1.00)")

var bc2 = ctx.createRadialGradient(429,420, 1, 200, 100, 500);

bc2.addColorStop(0, "rgba(196,155,151,1.00)")

bc2.addColorStop(0.5, "rgba(169,120,113,1.00)")

bc2.addColorStop(1, "rgba(142,95,85,1.00)")

var bc3 = ctx.createRadialGradient(297,10, 1, 200, 100, 500);

bc3.addColorStop(0, "rgba(196,155,151,1.00)")

bc3.addColorStop(0.5, "rgba(169,120,113,1.00)")

bc3.addColorStop(1, "rgba(142,95,85,1.00)")

var bc4 = ctx.createLinearGradient(300,256,300,300)

bc4.addColorStop(0, "rgba(196,155,151,1.00)")

bc4.addColorStop(0.5, "rgba(169,120,113,1.00)")

bc4.addColorStop(1, "rgba(157,114,108,1.00)")

//buns

//bun left

ctx.beginPath();

ctx.ellipse(172,434,81,88,-0.5,20,20,true)

ctx.closePath();

ctx.fillStyle = bc;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//bun right

ctx.beginPath();

ctx.ellipse(443,444,81,92,0.48,20,20,true)

ctx.closePath();

ctx.fillStyle = bc2;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//back hair

ctx.beginPath();

ctx.moveTo(300,470);

ctx.quadraticCurveTo(202,448,173,378);

ctx.quadraticCurveTo(118,225,209,146);

ctx.quadraticCurveTo(292,61,401,146);

ctx.quadraticCurveTo(504,244,416,379);

ctx.quadraticCurveTo(375,427,300,470);

ctx.closePath();

ctx.fillStyle = bc3;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

var fc = ctx.createRadialGradient(184,494, 100, 50, 100, 300);

fc.addColorStop(0, "rgba(255,163,155,1.00)")

fc.addColorStop(0.5, "rgba(254,156,143,1.00)")

fc.addColorStop(1, "rgba(253,122,104,1.00)")

var fc2 = ctx.createRadialGradient(417,481, 30, 400, 600, 200);

fc2.addColorStop(0, "rgba(255,163,155,1.00)")

fc2.addColorStop(0.5, "rgba(254,156,143,1.00)")

fc2.addColorStop(1, "rgba(253,122,104,1.00)")

var fc3 = ctx.createRadialGradient(273,244, 50, 300, 300, 200);

fc3.addColorStop(0, "rgba(253,174,161,1.00)")

fc3.addColorStop(0.5, "rgba(253,126,108,1.00)")

fc3.addColorStop(1, "rgba(250,167,159,1.00)")

//ears

//outer ear left

ctx.beginPath();

ctx.ellipse(173,404,27,34,-0.16,20,20,true)

ctx.closePath();

ctx.fillStyle = fc;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//outer ear right

ctx.beginPath();

ctx.ellipse(419,402,27,35,0.4,20,20,true)

ctx.closePath();

ctx.fillStyle = fc2;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//inner ear left

ctx.beginPath();

ctx.ellipse(174,402,11,17,-0.18,20,20,true)

ctx.closePath();

ctx.fillStyle = fc;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//inner ear right

ctx.beginPath();

ctx.ellipse(424,401,11,17,0.3,20,20,true)

ctx.closePath();

ctx.fillStyle = fc2;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//earrigs

//earring left

ctx.beginPath();

ctx.ellipse(190,462,7,39,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(204,150,88,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//earring right

ctx.beginPath();

ctx.ellipse(405,462,7,39,0,20,20,true)

ctx.closePath();

ctx.fillStyle = "rgba(204,150,88,1.00)";

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//face

ctx.beginPath();

ctx.moveTo(300,139);

ctx.quadraticCurveTo(188,148,168,264);

ctx.bezierCurveTo(157,280,175,342, 172,369);

ctx.bezierCurveTo(175,455,235,500,248, 511);

ctx.quadraticCurveTo(313,558,364,494)

ctx.bezierCurveTo(460,390,397,413, 436,295);

ctx.quadraticCurveTo(444,142,300,139);

ctx.closePath();

ctx.fillStyle = fc3;

ctx.fill();

ctx.stroke();

ctx.lineWidth = 3

//shading face

//left eye top

ctx.beginPath();

ctx.moveTo(197,314)

ctx.quadraticCurveTo(280,282,270,366);

ctx.quadraticCurveTo(250,314,197,314);

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//right eye top

ctx.beginPath();

ctx.moveTo(332,355)

ctx.bezierCurveTo(321,343,327,269,412,316)

ctx.quadraticCurveTo(349,304,332,355)

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//left eye inner

ctx.beginPath();

ctx.moveTo(262,389)

ctx.quadraticCurveTo(210,292,175,357);

ctx.quadraticCurveTo(192,422,262,389)

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//right eye inner

ctx.beginPath();

ctx.moveTo(338,385)

ctx.quadraticCurveTo(386,295,419,353);

ctx.quadraticCurveTo(407,419,338,385)

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//nose

ctx.beginPath();

ctx.moveTo(275,499)

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//lower lip

ctx.beginPath();

ctx.moveTo(287,507)

ctx.quadraticCurveTo(301,522,314,507)

ctx.closePath();

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//topleft

ctx.beginPath();

ctx.moveTo(168,294)

ctx.bezierCurveTo(230,222,307,214,300,163)

ctx.quadraticCurveTo(155,238,168,294)

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//topright

ctx.beginPath();

ctx.moveTo(432,296)

ctx.bezierCurveTo(412,268,314,219,292,170)

ctx.quadraticCurveTo(450,228,432,296)

ctx.fillStyle = "rgba(216,79,60,1.00)";

ctx.fill();

//front hair

ctx.beginPath();

ctx.moveTo(166,298)

ctx.bezierCurveTo(154,262,304,190,299,166);

ctx.bezierCurveTo(315,205,443,261,434,298);

ctx.quadraticCurveTo(457,148,300,120);

ctx.quadraticCurveTo(158,125,166,298);

ctx.closePath();

ctx.fillStyle = bc3;

ctx.fill();

ctx.lineWidth = 3

//front hair lines

ctx.beginPath()

ctx.moveTo(165,295)

ctx.bezierCurveTo(190,230,280,213,300,168)

ctx.bezierCurveTo(317,202,425,254,436,294)

ctx.stroke()

//front hair shading

ctx.beginPath()

ctx.moveTo(313,153)

ctx.quadraticCurveTo(372,192,435,266)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

ctx.beginPath()

ctx.moveTo(303,122)

ctx.quadraticCurveTo(421,185,439,243)

ctx.quadraticCurveTo(388,176,303,122)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

ctx.beginPath()

ctx.moveTo(285,139)

ctx.quadraticCurveTo(216,159,174,256)

ctx.quadraticCurveTo(214,147,285,139)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

ctx.beginPath()

ctx.moveTo(267,118)

ctx.quadraticCurveTo(177,150,159,263)

ctx.quadraticCurveTo(194,149,267,118)

ctx.closePath();

ctx.fillStyle = "rgba(170,122,115,1.00)"

ctx.fill()

//mouth lines

ctx.beginPath();

ctx.moveTo(255,471)

ctx.bezierCurveTo(260,489,347,486,348,475)

ctx.stroke();

ctx.lineWidth = 3

ctx.beginPath();

ctx.moveTo(251,471)

ctx.quadraticCurveTo(257,474,261,470)

ctx.stroke();

ctx.beginPath();

ctx.moveTo(342,473)

ctx.quadraticCurveTo(347,477,353,475)

ctx.stroke();

//teeth

ctx.beginPath();

ctx.ellipse(302,484,10,20,1.5,0*Math.PI,2*Math.PI,false);

ctx.fillStyle = "rgba(245,200,194,1.00)"

ctx.fill();

//lips

//upper

ctx.beginPath();

ctx.moveTo(276,482)

ctx.bezierCurveTo(288,453,324,466,326,484)

ctx.quadraticCurveTo(317,488,300,478)

ctx.quadraticCurveTo(281,486,276,482)

ctx.fillStyle = "rgba(175,39,13,1.00)"

ctx.fill();

ctx.stroke();

//lower

ctx.beginPath();

ctx.moveTo(276,482)

ctx.bezierCurveTo(282,523,328,514,326,484)

ctx.quadraticCurveTo(312,492,300,492)

ctx.quadraticCurveTo(288,490,276,482)

ctx.fillStyle = "rgba(182,54,41,1)"

ctx.fill();

ctx.stroke();

//highlight

ctx.beginPath();

ctx.ellipse(302,500,2,7,1.7,0*Math.PI,2*Math.PI)

ctx.fillStyle = "rgba(225,80,49,1.00)"

ctx.fill();

ctx.beginPath();

ctx.ellipse(288,496,2,5,2,0*Math.PI,2*Math.PI)

ctx.fillStyle = "rgba(225,80,49,1.00)"

ctx.fill();

//nose

ctx.beginPath();

ctx.moveTo(283,454);

ctx.quadraticCurveTo(264,450,280,431)

ctx.stroke();

ctx.beginPath();

ctx.moveTo(318,429)

ctx.quadraticCurveTo(337,442,320,455)

ctx.stroke();

ctx.beginPath();

ctx.ellipse(287,451,1,3,1.85,0*Math.PI,2*Math.PI,false);

ctx.stroke();

ctx.beginPath();

ctx.ellipse(311,451,1,3,1.15,0*Math.PI,2*Math.PI,false);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(290,451);

ctx.quadraticCurveTo(300,464,309,451)

ctx.stroke();

//whites of eyes

//left eye

ctx.beginPath();

ctx.moveTo(175,346)

ctx.quadraticCurveTo(196,411,260,386)

ctx.quadraticCurveTo(234,310,175,346)

ctx.fillStyle = "rgba(246,205,201,1.00)"

ctx.fill();

//left shading

ctx.beginPath();

ctx.moveTo(175,345)

ctx.lineTo(179,356)

ctx.quadraticCurveTo(220,340,249,389)

ctx.lineTo(261,386)

ctx.quadraticCurveTo(236,311,175,345)

ctx.fillStyle = "rgba(196,168,156,1.00)"

ctx.fill();

//right eye

ctx.beginPath();

ctx.moveTo(340,386)

ctx.quadraticCurveTo(406,405,417,343)

ctx.quadraticCurveTo(354,315,340,386)

ctx.fillStyle = "rgba(246,205,201,1.00)"

ctx.fill();

//right shading

ctx.beginPath();

ctx.moveTo(340,386)

ctx.lineTo(347,387)

ctx.quadraticCurveTo(375,330,413,354)

ctx.lineTo(417,345)

ctx.quadraticCurveTo(366,304,340,386)

ctx.fillStyle = "rgba(196,168,156,1.00)"

ctx.fill();

//eye shade 1

//left

ctx.beginPath();

ctx.ellipse(233,363,18,20,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(29,41,101,1.00)"

ctx.fill();

ctx.stroke();

//right

ctx.beginPath();

ctx.ellipse(364,362,18,20,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(29,41,101,1.00)"

ctx.fill();

ctx.stroke();

//eye shade 2

//left

ctx.beginPath();

ctx.ellipse(232,367,11,18,2.1,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(58,63,95,1.00)"

ctx.fill();

//right

ctx.beginPath();

ctx.ellipse(368,363,11,18,0.75,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(58,63,95,1.00)"

ctx.fill();

//eye sahde 3

//right

ctx.beginPath();

ctx.ellipse(366,367,5,18,1.35,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(96,101,123,1.00)"

ctx.fill();

//left

ctx.beginPath();

ctx.ellipse(232,369,5,18,1.9,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(96,101,123,1.00)"

ctx.fill();

//eye shade 4

//right

ctx.beginPath();

ctx.moveTo(216,363)

ctx.quadraticCurveTo(227,388,247,376)

ctx.closePath();

ctx.fillStyle = "rgba(133,135,184,1.00)"

ctx.fill();

//left

ctx.beginPath();

ctx.moveTo(350,374)

ctx.quadraticCurveTo(367,390,382,365)

ctx.closePath();

ctx.fillStyle = "rgba(133,135,184,1.00)"

ctx.fill();

//highlights of eye

//white middle unedr circles

//left

ctx.beginPath()

ctx.ellipse(233,369,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//right

ctx.beginPath()

ctx.ellipse(363,369,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//blue center circles

//left

ctx.beginPath()

ctx.ellipse(233,365,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(31,38,82,1.00)"

ctx.fill();

//right

ctx.beginPath()

ctx.ellipse(364,364,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(31,38,82,1.00)"

ctx.fill();

//left center cirlce

ctx.beginPath()

ctx.ellipse(233,362,3,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//left lower circle

ctx.beginPath()

ctx.ellipse(220,374,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//right middle circle

ctx.beginPath()

ctx.ellipse(364,361,3,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(241,239,253,1.00)"

ctx.fill();

//right lower circle

ctx.beginPath()

ctx.ellipse(380,373,5,5,0,0*Math.PI,2*Math.PI,false)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//long highlights

//left

ctx.beginPath();

ctx.moveTo(222,355)

ctx.bezierCurveTo(222,343,183,343,190,355)

ctx.bezierCurveTo(207,354,222,359,220,359)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//right

ctx.beginPath();

ctx.moveTo(376,354)

ctx.bezierCurveTo(369,348,396,339,408,351)

ctx.bezierCurveTo(409,357,399,353,376,354)

ctx.fillStyle = "rgba(235,222,216,1.00)"

ctx.fill();

//lashes and liner

//low left

ctx.beginPath()

ctx.moveTo(219,392)

ctx.quadraticCurveTo(203,388,193,376)

ctx.lineTo(180,376)

ctx.lineTo(194,381)

ctx.lineTo(186,385)

ctx.lineTo(198,385)

ctx.quadraticCurveTo(203,393,219,392)

ctx.fillStyle = "rgba(0,7,6,1)"

ctx.fill()

//up left

ctx.beginPath();

ctx.moveTo(261,387)

ctx.quadraticCurveTo(228,315,174,350)

ctx.quadraticCurveTo(152,341,154,335)

ctx.quadraticCurveTo(176,338,178,334)

ctx.quadraticCurveTo(171,331,168,324)

ctx.quadraticCurveTo(185,335,191,331)

ctx.quadraticCurveTo(182,327,183,321)

ctx.quadraticCurveTo(193,333,206,329)

ctx.quadraticCurveTo(251,326,261,387)

ctx.fill();

ctx.fillStyle = "rgba(0,7,6,1.00)"

//up right

ctx.beginPath()

ctx.moveTo(338,386)

ctx.quadraticCurveTo(368,311,420,351)

ctx.quadraticCurveTo(429,346,436,333)

ctx.quadraticCurveTo(421,336,414,333)

ctx.quadraticCurveTo(426,328,428,319)

ctx.quadraticCurveTo(406,334,402,329)

ctx.quadraticCurveTo(412,324,413,313)

ctx.quadraticCurveTo(396,330,386,329)

ctx.quadraticCurveTo(342,333,338,386)

ctx.fill();

ctx.fillStyle = "rgba(0,7,6,1)"

//low right

ctx.beginPath()

ctx.moveTo(382,391)

ctx.quadraticCurveTo(400,384,409,367)

ctx.lineTo(420,368)

ctx.lineTo(409,373)

ctx.lineTo(407,376)

ctx.lineTo(417,380)

ctx.lineTo(405,380)

ctx.quadraticCurveTo(397,393,382,391)

ctx.fill();

ctx.fillStyle = "yellow"

//eyelid lines

//left large

ctx.beginPath()

ctx.moveTo(200,314)

ctx.quadraticCurveTo(262,305,267,360)

ctx.stroke();

//left small

ctx.beginPath()

ctx.moveTo(272,330)

ctx.quadraticCurveTo(269,324,266,307)

ctx.stroke();

//right small

ctx.beginPath()

ctx.moveTo(326,336)

ctx.quadraticCurveTo(330,324,331,306)

ctx.stroke();

//right large

ctx.beginPath()

ctx.moveTo(333,362)

ctx.quadraticCurveTo(348,296,408,317)

ctx.stroke();

//eyebrows

//left

ctx.beginPath();

ctx.moveTo(267,295)

ctx.quadraticCurveTo(268,271,252,258)

ctx.quadraticCurveTo(204,250,171,292)

ctx.quadraticCurveTo(219,264,267,295)

ctx.fillStyle = bc4;

ctx.fill();

ctx.stroke()

//right

ctx.beginPath();

ctx.moveTo(335,293)

ctx.quadraticCurveTo(330,275,342,263)

ctx.quadraticCurveTo(385,245,426,293)

ctx.quadraticCurveTo(378,265,335,293)

ctx.fillStyle = bc4;

ctx.fill();

ctx.stroke();

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////

// CREDITS

ctx.save();

var credits = "Susanna Triantafillou, Demon Girl, FMX 210, SP 2022";

ctx.font = 'bold 12px Helvetica';

ctx.fillStyle = "rgba(0,0,0,1)"; // change the color here

ctx.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

ctx.shadowBlur = 12;

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

ctx.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>

Search This Blog

FMX 210 Digital media_SP 2022

Canvas Project

Comments

Post a Comment

Popular posts from this blog

Portfolio

Black and White to Color

Logo Pre-Work