Canvas Project

September 22, 2022

Canvas Project

At first, I wanted to create a piece I love seeing in my daily life and would enjoy making in the process. Still, at the same time, it needed to be a challenge for me instead of using the more straightforward route since it should be considered that I have improved my skills in making art using codes. I thought of creating a butterfly, but I thought it would be easier for me, then I decided to create something with a butterfly-like, maybe, a hand touching the butterfly. Although I was skimming through the internet for a reference to help me as a guide in creating the art, I found something else that made me so fascinated that I became hyper in creating immediately. I saw a close-up image of a butterfly touching a cat's nose; it was so adorable, and it made me think that I should create a version with my cat instead of the image cat, especially since I'm missing my cat. I needed to leave her home in Miami since she's an adventurous cat that would hate staying inside all day in my college dorm. So, I drew out the guide on graph paper for a better idea to calculate the placements to create my piece and changed the image white cat into a version of my light brown cat while adding ears for more details.

Additionally, creating the project has taken many hours, from the outlines to the colors of the image. I started making the outlines of my cat by using the Bezier curve and quad curve to bring out the form. The process took at least 4-6 hours; bending within the lines was challenging to get the exact angles on how you wanted it since the graph paper can't guide you, and you need multiple trails to get the correct curve. Putting the colors within the cat was most challenging for me. It took around at least 6-7. The colors needed to be similar to my cat's fur, but at the same time, they required to match each other in shades. Also, I needed to use various shapes to bring out the colors and make the fur's details. Even my cat's coat had to be combined with other colors, and some figures needed to be transparent to use more shades in the colors. Even though I have to change a lot of shapes on their sides because they can't be out of line, it would be so messy that I have to check carefully and calculate the shapes' specialty so that they aren't popping out from the outlines. The lines bring out the cat's stripes from the mixing of the colors within and help to make the eyes a little more circle than a normal eye since the circles can not be curved in the canvas program. Although it took a long process, it went successfully in the end. I was able to put the forms of my cat with the butterfly by using colors with lines and shapes to be more realistic in the image.

The Codes

<!doctype html>

<html>

<head>

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>

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

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

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

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

var x = 0;

var y = 0;

var width = canvas.width;

var height = canvas.height;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 20;

context.fillStyle = 'rgb(80, 30, 30)';

context.fill();

context.strokeStyle = 'rgb(150, 50, 50)';

context.stroke();

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 50;

context.fillStyle = 'rgba(139, 216,222,1)';

context.fill();

context.strokeStyle = 'rgba(248,248,248,1)';

context.stroke();

///rectangle ear

var x=16;

var y=142;

var width = 98;

var height= 205;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(153,141,131,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear

var tx1 = 0;

var ty1 = 148;

var tx2 = 12;

var ty2 = 220;

var tx3 = 58;

var ty3 = 138;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(230,204,147,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 2

var tx1 = 110;

var ty1 = 140;

var tx2 = 120;

var ty2 = 305;

var tx3 = 187;

var ty3 = 275;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(230,204,147,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 3

var tx1 = 5;

var ty1 = 148;

var tx2 = 110;

var ty2 = 110;

var tx3 = 115;

var ty3 = 145;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 0;

context.fillStyle = 'rgba(230,204,147,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 2 shade

var tx1 = 100;

var ty1 = 105;

var tx2 = 110;

var ty2 = 305;

var tx3 = 140;

var ty3 = 275;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(106,88,65,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 4

var tx1 = 10;

var ty1 = 205;

var tx2 = 20;

var ty2 = 380;

var tx3 = 158;

var ty3 = 330;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 0;

context.fillStyle = 'rgba(239,216,166,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///rectangle fur

var x=25;

var y=305;

var width = 275;

var height= 545;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(218,194,144,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///rectangle fur 2

var x=225;

var y=245;

var width = 175;

var height= 605;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(239,216,166,0.8)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///rectangle fur 3

var x=0;

var y=600;

var width = 190;

var height= 570;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(218,194,144,1)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///rectangle fur 4

var x=400;

var y=250;

var width = 20;

var height= 200;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(239,216,166,0.8)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///rectangle fur 6

var x=400;

var y=750;

var width = 65;

var height= 100;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(239,216,166,0.8)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle head 4 shade 2

var tx1 = 380;

var ty1 = 250;

var tx2 = 330;

var ty2 = 350;

var tx3 = 510;

var ty3 = 340;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(251,246,207,1)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle head 4 shade 3

var tx1 = 230;

var ty1 = 219;

var tx2 = 300;

var ty2 = 300;

var tx3 = 418;

var ty3 = 250;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(153,141,131,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle head 4 shade 3

var tx1 = 405;

var ty1 = 260;

var tx2 = 430;

var ty2 = 330;

var tx3 = 505;

var ty3 = 350;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(153,141,131,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle eye shade 1

var tx1 = 365;

var ty1 = 420;

var tx2 = 325;

var ty2 = 360;

var tx3 = 455;

var ty3 = 400;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(153,141,131,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

// stipes fur BC 1

// starting point coordinates

var x8 = 190;

var y8 = 300;

// control point coordinates ( magnet )

var cpointX6 = 310;

var cpointY6 = 210;

// ending point coordinates

var x7 = 410;

var y7 = 270;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, x7, y7);

context.lineWidth = 7;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.stroke();

// stipes fur BC 2

// starting point coordinates

var x9 = 410;

var y9 = 300;

// control point 1 coordinates ( magnet )

var cpointX7 = 450;

var cpointY7 = 300;

// control point 2 coordinates ( magnet )

var cpointX8 = 430;

var cpointY8 = 310;

// ending point coordinates

var x10 = 630;

var y10 = 380;

context.beginPath();

context.moveTo(x9, y9);

context.bezierCurveTo (cpointX7, cpointY7, cpointX8, cpointY8, x10, y10);

context.lineWidth = 7;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.lineCap = 'round'

context.stroke();

//traingle fur 4

var tx1 = 18;

var ty1 = 555;

var tx2 = 10;

var ty2 = 610;

var tx3 = 35;

var ty3 = 595;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(218,194,144,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle fur 5

var tx1 = 16;

var ty1 = 390;

var tx2 = 90;

var ty2 = 365;

var tx3 = 95;

var ty3 = 580;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(234,167,110,0.6)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///rectangle fur 5

var x=200;

var y=340;

var width = 345;

var height= 230;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 0;

context.fillStyle = 'rgba(239,216,166,0.9)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle fur 6

var tx1 = 500;

var ty1 = 330;

var tx2 = 505;

var ty2 = 450;

var tx3 = 635;

var ty3 = 380;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(234,167,110,0.8)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//stripes line

var x21= 400;

var y21= 300;

var x22= 350;

var y22= 250;

context.beginPath();

context.moveTo(x21,y21);

context.lineTo(x22,y22);

context.lineWidth = 7;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.lineCap = 'round';

context.stroke();

// stipes fur BC 3

// starting point coordinates

var x9 = 285;

var y9 = 355;

// control point 1 coordinates ( magnet )

var cpointX7 = 260;

var cpointY7 = 350;

// control point 2 coordinates ( magnet )

var cpointX8 = 250;

var cpointY8 = 450;

// ending point coordinates

var x10 = 150;

var y10 = 515;

context.beginPath();

context.moveTo(x9, y9);

context.bezierCurveTo (cpointX7, cpointY7, cpointX8, cpointY8, x10, y10);

context.lineWidth = 20;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.lineCap = 'round'

context.stroke();

// stipes fur BC 5

// starting point coordinates

var x9 = 285;

var y9 = 355;

// control point 1 coordinates ( magnet )

var cpointX7 = 260;

var cpointY7 = 350;

// control point 2 coordinates ( magnet )

var cpointX8 = 250;

var cpointY8 = 450;

// ending point coordinates

var x10 = 150;

var y10 = 515;

context.beginPath();

context.moveTo(x9, y9);

context.bezierCurveTo (cpointX7, cpointY7, cpointX8, cpointY8, x10, y10);

context.lineWidth = 10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.lineCap = 'round'

context.stroke();

//// stipes QC 1

// starting point coordinates

var x10 = 310;

var y10 = 380;

// control point coordinates ( magnet )

var cpointX6 = 310;

var cpointY6 = 400;

// ending point coordinates

var x17 = 360;

var y17 = 400;

context.beginPath();

context.moveTo(x10, y10);

context.quadraticCurveTo(cpointX6, cpointY6, x17, y17);

context.lineWidth = 20;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.stroke();

//// stipes QC 2

// starting point coordinates

var x10 = 310;

var y10 = 380;

// control point coordinates ( magnet )

var cpointX6 = 310;

var cpointY6 = 400;

// ending point coordinates

var x17 = 360;

var y17 = 400;

context.beginPath();

context.moveTo(x10, y10);

context.quadraticCurveTo(cpointX6, cpointY6, x17, y17);

context.lineWidth = 10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

// stipes fur BC 6

// starting point coordinates

var x9 = 370;

var y9 = 450;

// control point 1 coordinates ( magnet )

var cpointX7 = 300;

var cpointY7 = 470;

// control point 2 coordinates ( magnet )

var cpointX8 = 250;

var cpointY8 = 490;

// ending point coordinates

var x10 = 240;

var y10 = 515;

context.beginPath();

context.moveTo(x9, y9);

context.bezierCurveTo (cpointX7, cpointY7, cpointX8, cpointY8, x10, y10);

context.lineWidth = 20;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.lineCap = 'round'

context.stroke();

// stipes fur BC 7

// starting point coordinates

var x9 = 370;

var y9 = 450;

// control point 1 coordinates ( magnet )

var cpointX7 = 300;

var cpointY7 = 470;

// control point 2 coordinates ( magnet )

var cpointX8 = 250;

var cpointY8 = 490;

// ending point coordinates

var x10 = 240;

var y10 = 515;

context.beginPath();

context.moveTo(x9, y9);

context.bezierCurveTo (cpointX7, cpointY7, cpointX8, cpointY8, x10, y10);

context.lineWidth = 10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.lineCap = 'round'

context.stroke();

///trapzoid mouth

context.beginPath();

context.moveTo(250,550); // move to starting coordinates

context.lineTo(633,385); // draw line to following point coordinates

context.lineTo(630,588); // draw line to following point coordinates

context.lineTo(400,725); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(245,243,235,1.00)';

context.fill();

///context.lineTo(300,555); // draw line to following point coordinates

//traingle mouth fur

var tx1 = 420;

var ty1 = 550;

var tx2 = 638;

var ty2 = 420;

var tx3 = 625;

var ty3 = 560;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(153,141,131, 0.5)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//trapzoid stipes

context.beginPath();

context.moveTo(115,575); // move to starting coordinates

context.lineTo(210,515); // draw line to following point coordinates

context.lineTo(325,580); // draw line to following point coordinates

context.lineTo(345,610); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(234,167,110,0.8)';

context.fill();

//trapzoid stipes 2

context.beginPath();

context.moveTo(115,575); // move to starting coordinates

context.lineTo(205,545); // draw line to following point coordinates

context.lineTo(335,590); // draw line to following point coordinates

context.lineTo(340,610); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

//trapzoid stipes3

context.beginPath();

context.moveTo(150,590); // move to starting coordinates

context.lineTo(110,615); // draw line to following point coordinates

context.lineTo(340,655); // draw line to following point coordinates

context.lineTo(325,660); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

//trapzoid stipes 4

context.beginPath();

context.moveTo(230,630); // move to starting coordinates

context.lineTo(260,650); // draw line to following point coordinates

context.lineTo(320,660); // draw line to following point coordinates

context.lineTo(350,650); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(234,167,110,0.8)';

context.fill();

////circle whisker

var centerX = 540;

var centerY = 455;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

////circle whisker 2

var centerX = 510;

var centerY = 465;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

////circle whisker 3

var centerX = 480;

var centerY = 475;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

////circle whisker 4

var centerX = 560;

var centerY = 480;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

////circle whisker 5

var centerX = 535;

var centerY = 490;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

////circle whisker 6

var centerX = 515;

var centerY = 500;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

////circle whisker 7

var centerX = 490;

var centerY = 510;

var radius = 2;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.fill();

context.lineWidth =10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

//traingle neck fur

var tx1 = 305;

var ty1 = 630;

var tx2 = 520;

var ty2 = 650;

var tx3 = 420;

var ty3 = 850;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(153,141,131,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//Nose color

var tx1 = 635;

var ty1 = 375;

var tx2 = 580;

var ty2 = 405;

var tx3 = 635;

var ty3 = 440;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(204,146,133,1)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

////nose hole

var centerX = 613;

var centerY = 405;

var radius = 5;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.lineWidth =10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

///trapzoid ear shade

context.beginPath();

context.moveTo(106,230); // move to starting coordinates

context.lineTo(110,305); // draw line to following point coordinates

context.lineTo(180,300); // draw line to following point coordinates

context.lineTo(200,265); // draw line to following point coordinates

context.lineTo(112,280); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(106,88,65,1.00)';

context.fill();

//traingle ear 4 shade

var tx1 = 10;

var ty1 = 240;

var tx2 = 15;

var ty2 = 380;

var tx3 = 90;

var ty3 = 380;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(106,88,65,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 4 shade 2

var tx1 = 13;

var ty1 = 212;

var tx2 = 35;

var ty2 = 280;

var tx3 = 60;

var ty3 = 270;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(248,248,248,1)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 4 shade 3

var tx1 = 95;

var ty1 = 260;

var tx2 = 65;

var ty2 = 290;

var tx3 = 105;

var ty3 = 300;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(248,248,248,1)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 5 shade

var tx1 = 280;

var ty1 = 100;

var tx2 = 225;

var ty2 = 255;

var tx3 = 306;

var ty3 = 230;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(239,216,166,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 5 shade 2

var tx1 = 285;

var ty1 = 105;

var tx2 = 225;

var ty2 = 255;

var tx3 = 265;

var ty3 = 245;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(124,104,79,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle ear 5 shade 3

var tx1 = 295;

var ty1 = 150;

var tx2 = 285;

var ty2 = 240;

var tx3 = 305;

var ty3 = 235;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(153,141,131,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///trapzoid 2 shade

context.beginPath();

context.moveTo(55,325); // move to starting coordinates

context.lineTo(90,400); // draw line to following point coordinates

context.lineTo(160,390); // draw line to following point coordinates

context.lineTo(200,360); // draw line to following point coordinates

context.lineTo(55,325); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(106,88,65,1.00)';

context.fill();

///trapzoid fur shade

context.beginPath();

context.moveTo(115,310); // move to starting coordinates

context.lineTo(250,245); // draw line to following point coordinates

context.lineTo(260,300); // draw line to following point coordinates

context.lineTo(160,355); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(245,243,235,1)'

context.fill();

//traingle fur 2 shade

var tx1 = 170;

var ty1 = 345;

var tx2 = 270;

var ty2 = 345;

var tx3 = 285;

var ty3 = 290;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(106,88,65,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

///trapzoid fur 2 shade

context.beginPath();

context.moveTo(100,420); // move to starting coordinates

context.lineTo(170,455); // draw line to following point coordinates

context.lineTo(290,410); // draw line to following point coordinates

context.lineTo(260,340); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = 'rgba(234,167,110,0.4)';

context.fill();

//traingle fur shade 4

var tx1 = 0;

var ty1 = 650;

var tx2 = 45;

var ty2 = 680;

var tx3 = 0;

var ty3 = 745;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(114,103,89,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle shadow eye

var tx1 = 282;

var ty1 = 355;

var tx2 = 360;

var ty2 = 285;

var tx3 = 388;

var ty3 = 380;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 15;

context.fillStyle = 'rgba(75,45,4,1.00)';

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

// eye shawdow line qc

// starting point coordinates

var x8 = 360;

var y8 = 291;

// control point coordinates ( magnet )

var cpointX6 = 375;

var cpointY6 = 310;

// control point 2 coordinates ( magnet )

var cpointX15 = 385;

var cpointY15 = 375;

// ending point coordinates

var x7 = 400;

var y7 = 375;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, cpointX15, cpointY15,x7, y7);

context.lineWidth = 10;

context.strokeStyle = 'rgba(75,45,4,1.00)';

context.stroke();

//traingle eye

var tx1 = 290;

var ty1 = 354;

var tx2 = 350;

var ty2 = 303;

var tx3 = 380;

var ty3 = 370;

var startx = 280;

var starty = 355;

var endx = 350;

var endy = 350;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 0;

//context.fillStyle = 'rgb(230, 230, 230)';

var grd = context.createLinearGradient(startx, starty, endx, endy);

grd.addColorStop(0.5, 'rgb(242, 203, 103)');

grd.addColorStop(1, 'rgb(220, 165, 25)');

context.fillStyle = grd;

context.fill();

context.stroke();

// eye line qc

// starting point coordinates

var x8 = 345;

var y8 = 318;

// control point coordinates ( magnet )

var cpointX6 = 355;

var cpointY6 = 310;

// control point 2 coordinates ( magnet )

var cpointX15 = 370.5;

var cpointY15 = 360;

// ending point coordinates

var x9 = 365;

var y9 = 315;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, cpointX15, cpointY15,x9, y9);

context.lineWidth = 9;

context.strokeStyle = 'rgba(220,165,5,1.00)';

context.stroke();

////eyecircle

var centerX = 348;

var centerY = 335;

var radius = 12;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.lineWidth =10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

//eye line

var x8 = 345;

var y8 = 315;

// control point coordinates ( magnet )

var cpointX6 = 360;

var cpointY6 = 320;

// ending point coordinates

var x7 = 365;

var y7 = 345;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, x7, y7);

context.lineWidth = 8;

context.strokeStyle = 'rgba(248,248,248,1)';

context.stroke();

//BACK

// starting point coordinates

var x = 150;

var y = 0;

// control point 1 coordinates ( magnet )

var cpointX1 = 70;

var cpointY1 = 500;

// control point 2 coordinates ( magnet )

var cpointX2 = 0;

var cpointY2 = 400;

// control point 4 coordinates ( magnet )

var cpointX3 = 5;

var cpointY3 = 150;

// ending point coordinates

var x1 = 0;

var y1 = 610;

context.beginPath(x, y);

context.moveTo(x1, y1);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2,cpointX3, cpointY3);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round'

context.stroke();

//context.lineCap = Lines can have one of three cap styles: butt, round, or square

// lineCap property must be set before calling stroke()

//ear line

var x5= 10;

var y5= 150;

var x6= 105;

var y6= 110;

context.beginPath();

context.moveTo(x5,y5);

context.lineTo(x6,y6);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round';

context.stroke();

//EAR BC

// starting point coordinates

var x2 = 105;

var y2 = 110;

// control point 1 coordinates ( magnet )

var cpointX4 = 140;

var cpointY4 = 210;

// control point 2 coordinates ( magnet )

var cpointX5 = 145;

var cpointY5 = 220;

// ending point coordinates

var x3 = 190;

var y3 = 270;

context.beginPath();

context.moveTo(x2, y2);

context.bezierCurveTo (cpointX4, cpointY4, cpointX5, cpointY5, x3, y3);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round'

context.stroke();

////Head QC

// starting point coordinates

var x8 = 190;

var y8 = 270;

// control point coordinates ( magnet )

var cpointX6 = 310;

var cpointY6 = 210;

// ending point coordinates

var x7 = 410;

var y7 = 250;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, x7, y7);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

// Head BC

// starting point coordinates

var x9 = 410;

var y9 = 250;

// control point 1 coordinates ( magnet )

var cpointX7 = 450;

var cpointY7 = 300;

// control point 2 coordinates ( magnet )

var cpointX8 = 430;

var cpointY8 = 310;

// ending point coordinates

var x10 = 630;

var y10 = 380;

context.beginPath();

context.moveTo(x9, y9);

context.bezierCurveTo (cpointX7, cpointY7, cpointX8, cpointY8, x10, y10);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round'

context.stroke();

//EAR BC 2

// starting point coordinates

var x11 = 220;

var y11 = 255;

// control point 1 coordinates ( magnet )

var cpointX9 = 240;

var cpointY9 = 210;

// control point 2 coordinates ( magnet )

var cpointX10 = 260;

var cpointY10 = 190;

// ending point coordinates

var x12 = 285;

var y12 = 100;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round'

context.stroke();

////EAR QC 2

// starting point coordinates

var x13 = 285;

var y13 = 100;

// control point coordinates ( magnet )

var cpointX11 = 310;

var cpointY11 = 210;

// ending point coordinates

var x14 = 305;

var y14 = 235;

context.beginPath();

context.moveTo(x13, y13)

context.quadraticCurveTo(cpointX11, cpointY11, x14, y14);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////Nose

// starting point coordinates

var x15 = 630;

var y15 = 380;

// control point coordinates ( magnet )

var cpointX12 = 640;

var cpointY12 = 400;

// ending point coordinates

var x16 = 630;

var y16 = 430;

context.beginPath();

context.moveTo(x15, y15);

context.quadraticCurveTo(cpointX12, cpointY12, x16, y16);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////Nose 2

// starting point coordinates

var x17 = 570;

var y17 = 400;

// control point coordinates ( magnet )

var cpointX13 = 670;

var cpointY13 = 425;

// ending point coordinates

var x18 = 625;

var y18 = 520;

context.beginPath();

context.moveTo(x17, y17);

context.quadraticCurveTo(cpointX13, cpointY13, x18, y18);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

// Mouth

// starting point coordinates

var x19 = 400;

var y19 = 540;

// control point 1 coordinates ( magnet )

var cpointX14 = 590;

var cpointY14 = 580;

// control point 2 coordinates ( magnet )

var cpointX15 = 625;

var cpointY15 = 445;

// ending point coordinates

var x20 = 630;

var y20 = 430;

context.beginPath();

context.moveTo(x19, y19);

context.quadraticCurveTo(cpointX14, cpointY14, cpointX15, cpointY15, x20, y20);

context.lineWidth = 10;

context.strokeStyle = 'rgba(106,88,65,1.00)';

context.stroke();

//hair line

var x21= 625;

var y21= 530;

var x22= 640;

var y22= 550;

context.beginPath();

context.moveTo(x21,y21);

context.lineTo(x22,y22);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round';

context.stroke();

//hair line 2

// starting point coordinates

var x23= 620;

var y23= 565;

// control point 1 coordinates ( magnet )

var cpointX16 = 620;

var cpointY16 = 545;

// ending point coordinates

var x24= 615;

var y24= 535;

context.beginPath();

context.moveTo(x23, y23);

context.quadraticCurveTo(cpointX16, cpointY16,x24, y24);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

//hair line 3

// starting point coordinates

var x25= 600;

var y25= 565;

// control point 1 coordinates ( magnet )

var cpointX16 = 610;

var cpointY16 = 600;

// ending point coordinates

var x26= 590;

var y26= 610;

context.beginPath();

context.moveTo(x25, y25);

context.quadraticCurveTo(cpointX16, cpointY16,x26, y26);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

//hair line 4

// starting point coordinates

var x27= 585;

var y27= 645;

// control point 1 coordinates ( magnet )

var cpointX17 = 580;

var cpointY17 = 625;

// ending point coordinates

var x28= 570;

var y28= 620;

context.beginPath();

context.moveTo(x27, y27);

context.quadraticCurveTo(cpointX17, cpointY17,x28, y28);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

//neck BC

// starting point coordinates

var x29 = 540;

var y29 = 635;

// control point 1 coordinates ( magnet )

var cpointX18 = 480;

var cpointY18 = 700;

// control point 2 coordinates ( magnet )

var cpointX19 = 450;

var cpointY19 = 750;

// ending point coordinates

var x30 = 480;

var y30 = 800;

context.beginPath();

context.moveTo(x29, y29);

context.bezierCurveTo ( cpointX18, cpointY18, cpointX19, cpointY19, x30, y30);

context.lineWidth = 10;

context.strokeStyle ="rgba(0,0,0,1.00)";

context.lineCap = 'round'

context.stroke();

//hair line 5

var x31= 545;

var y31= 625;

var x32= 555;

var y32= 650;

context.beginPath();

context.moveTo(x31,y31);

context.lineTo(x32,y32);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round';

context.stroke();

//neck hair BC

// starting point coordinates

var x33 = 460;

var y33 = 790;

// control point 1 coordinates ( magnet )

var cpointX20 = 455;

var cpointY20 = 800;

// control point 2 coordinates ( magnet )

var cpointX21 = 465;

var cpointY21 = 810;

// ending point coordinates

var x34 = 470;

var y34 = 845;

context.beginPath();

context.moveTo(x33, y33);

context.bezierCurveTo ( cpointX20, cpointY20, cpointX21, cpointY21, x34, y34);

context.lineWidth = 10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.lineCap = 'round'

context.stroke();

///butterfly

//color

context.beginPath();

context.moveTo(489,160); // move to starting coordinates

context.lineTo(550,140); // draw line to following point coordinates

context.lineTo(622,310); // draw line to following point coordinates

context.lineTo(500,295.5); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = "rgba(235,90,13, 0.8)";

context.fill();

//traingle

var tx1 = 498;

var ty1 = 147.5;

var tx2 = 560;

var ty2 = 150;

var tx3 = 585;

var ty3 = 200;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 0;

context.fillStyle = "rgba(235,90,13, 0.8)";

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//traingle

var tx1 = 607;

var ty1 = 250;

var tx2 = 515;

var ty2 = 305;

var tx3 = 620;

var ty3 = 318;

var startx = 575;

var starty = 400;

var endx = 650;

var endy = 500;

context.beginPath();

context.moveTo(tx1, ty1);

context.lineTo(tx2, ty2);

context.lineTo(tx3, ty3);

context.lineTo(tx1, ty1);

context.closePath();

context.lineWidth = 0;

context.fillStyle = "rgba(235,90,13, 0.8)";

context.strokeStyle = 'rgba(248,248,248,0)';

context.fill();

context.stroke();

//outline 1

////wing QC

// starting point coordinates

var x8 = 500;

var y8 = 290;

// control point coordinates ( magnet )

var cpointX6 = 560;

var cpointY6 = 200;

// ending point coordinates

var x7 = 580;

var y7 = 225;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, x7, y7);

context.lineWidth = 5;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

///rectangle

context.beginPath();

context.moveTo(480,275); // move to starting coordinates

context.lineTo(495,270); // draw line to following point coordinates

context.lineTo(560,330); // draw line to following point coordinates

context.lineTo(550,328); // draw line to following point coordinates

context.lineCap = 'round';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(248,248,248,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.lineJoin = 'round';

context.stroke();

context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

////head circle

var centerX = 480;

var centerY = 270;

var radius = 4;

var startangle = 0;

var endangle = 6* Math.PI;

context.beginPath();

context.arc(centerX, centerY, radius, startangle, endangle, false);

context.lineWidth = 15;

context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.lineWidth =10;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////wing QC

// starting point coordinates

var x8 = 500;

var y8 = 275;

// control point coordinates ( magnet )

var cpointX6 = 460;

var cpointY6 = 110;

// ending point coordinates

var x7 = 560;

var y7 = 150;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, x7, y7);

context.lineWidth = 12;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////wing bc

// starting point coordinates

var x11 = 560;

var y11 = 150;

// control point 1 coordinates ( magnet )

var cpointX9 = 600;

var cpointY9 = 200;

// control point 2 coordinates ( magnet )

var cpointX10 = 560;

var cpointY10 = 210;

// ending point coordinates

var x12 = 590;

var y12 = 230;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 12;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////wing QC 2

// starting point coordinates

var x8 = 590;

var y8 = 230;

// control point coordinates ( magnet )

var cpointX6 = 670;

var cpointY6 = 350;

// ending point coordinates

var x7 = 535;

var y7 = 310;

context.beginPath();

context.moveTo(x8, y8);

context.quadraticCurveTo(cpointX6, cpointY6, x7, y7);

context.lineWidth = 12;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////ear bc

// starting point coordinates

var x11 = 475;

var y11 = 270;

// control point 1 coordinates ( magnet )

var cpointX9 = 420;

var cpointY9 = 220;

// control point 2 coordinates ( magnet )

var cpointX10 = 460;

var cpointY10 = 230;

// ending point coordinates

var x12 = 420;

var y12 = 220;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 4;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////ear bc

// starting point coordinates

var x11 = 485;

var y11 = 270;

// control point 1 coordinates ( magnet )

var cpointX9 = 460;

var cpointY9 = 220;

// control point 2 coordinates ( magnet )

var cpointX10 = 480;

var cpointY10 = 230;

// ending point coordinates

var x12 = 455;

var y12 = 220;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 4;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////leg bc

// starting point coordinates

var x11 = 520;

var y11 = 295;

// control point 1 coordinates ( magnet )

var cpointX9 = 450;

var cpointY9 = 290;

// control point 2 coordinates ( magnet )

var cpointX10 = 480;

var cpointY10 = 300;

// ending point coordinates

var x12 = 510;

var y12 = 335;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 4;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////leg bc 2

// starting point coordinates

var x11 = 550;

var y11 = 316;

// control point 1 coordinates ( magnet )

var cpointX9 = 490;

var cpointY9 = 290;

// control point 2 coordinates ( magnet )

var cpointX10 = 530;

var cpointY10 = 300;

// ending point coordinates

var x12 = 555;

var y12 = 350;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 4;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

////leg bc 2

// starting point coordinates

var x11 = 505;

var y11 = 300;

// control point 1 coordinates ( magnet )

var cpointX9 = 495;

var cpointY9 = 260;

// control point 2 coordinates ( magnet )

var cpointX10 = 500;

var cpointY10 = 300;

// ending point coordinates

var x12 = 510;

var y12 = 330;

context.beginPath();

context.moveTo(x11, y11);

context.bezierCurveTo ( cpointX9, cpointY9, cpointX10, cpointY10, x12, y12);

context.lineWidth = 4;

context.strokeStyle = "rgba(0,0,0,1.00)";

context.stroke();

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

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

// CREDITS

context.save();

var credits = "Yalecxa Estrada, Cat Butterfly, FMX 210, FA 2022";

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>

Search This Blog

Yalecxa Estrada's FMX 210

Canvas Project

Canvas Project

Comments

Post a Comment

Popular Posts

First Blog

Illustrator Tutorials Overview