Blu Skies

“Blu Skies” is inspired by the emphasis recently placed on mental health. This piece is a representation of how life can be a whirlwind of emotions that is not easily navigated and one can become overwhelmed by these conflicting thoughts. I chose the color blue as the main color of this piece because people have different interpretations of the connotation of blue. Some people see it as sadness while others identify the color with peace. In the same way that each individual interprets blue in their own way, each individual interprets and handles emotions in their own way. In both cases, I believe there is no right answer and that the key to successfully navigating through life’s rollercoaster of emotions is empathy. I wanted to encourage self-reflection in the viewer on their own and others' emotions. The subject in this piece is slightly smiling to show the audience that despite the chaos of life, the flowers, there is beauty that lies throughout.

This project was difficult for me and it took a lot of patience. I struggled with taking the skills and code learned in previous assignments and turning that into the shapes I needed. In my opinion, what can be done with numbers and coding is not comparable to what can be done with pencil and paper. Once I figured out how to manipulate the Bezier curve and quadratic curve appropriately, I finished the head neck, and eyes relatively easily. Then I ran into the issue, where changing one piece of code, such as the color, changed the color of another element. This was the most frustrating part and at some point, the canvas would be completely wiped. The most challenging element of this piece was the lips. The lips are composed of three bezier curves, but I couldn’t fill the shape as a whole so instead, I just filled it with circles that had large radii. This project took me approximately 8 hours to complete and while it was very challenging I enjoyed it.

CODE

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

//background

var x = 0

var y = 0

var width = canvas.width;

var height = canvas.height;

context.beginPath;

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

var grd = context.createLinearGradient(100, 400, 100, 100);

grd.addColorStop(0, 'rgba(0,18,86,0.69)');

grd.addColorStop(.5, 'rgba(7,66,188,0.69)');

grd.addColorStop(1, 'rgb(255,255,255)');

context.fillStyle = grd;

context.fill();

context.strokeStyle = 'rgb (255,255,255)';

context.stroke();

// hair

var centerX = 550;

var centerY = 50;

var radius = 60;

var startangle = 0;

var endangle = 1.5 * Math.PI;

context.beginPath();

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

context.fillStyle = "#000000";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#000000";

context.stroke();

var centerX = 620;

var centerY = 90;

var radius = 60;

var startangle = 0;

var endangle = 1.5 * Math.PI;

context.beginPath();

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

context.fillStyle = "#000000";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#000000";

context.stroke();

var x = 650;

var y = 90;

// control point coordinates ( magnet )

var cpointX = 680;

var cpointY = 110;

// ending point coordinates

var x1 = 620;

var y1 = 600;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 20;

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

context.stroke();

context.beginPath();

context.moveTo(300, 200);

context.lineTo(550, 200);

context.quadraticCurveTo(650, 650, 700, 600);

context.lineTo(150, 600);

context.quadraticCurveTo(250, 350, 250, 200);

context.stroke();

var grd = context.createLinearGradient(100, 250, 680, 150);

grd.addColorStop(.05, "rgba(0,0,0,1.00)");

grd.addColorStop(0.5, '#000000');

grd.addColorStop(.75, "rgba(10,2,6,1.00)");

grd.addColorStop(1, "rgba(0,0,0,1.00)");

context.fillStyle = grd;

context.fill();

context.beginPath();

context.moveTo(200, 160);

context.quadraticCurveTo(200, 500, 290, 699);

context.quadraticCurveTo(180, 550, 180, 150);

context.lineTo(200, 160);

context.moveTo(200, 160);

context.quadraticCurveTo(190, 650, 250, 650);

context.quadraticCurveTo(90, 550, 180, 150);

context.lineTo(200, 160);

context.moveTo(200, 160);

context.quadraticCurveTo(100, 650, 0, 599);

context.quadraticCurveTo(100, 480, 200, 150);

context.lineTo(200, 160);

context.stroke();

var grd = context.createLinearGradient(0, 150, 150, 150);

grd.addColorStop(0.5, '#080001');

grd.addColorStop(1, "rgba(0,0,0,1.00)");

context.fillStyle = grd;

context.fill();

context.beginPath();

// context.beginPath();

context.moveTo(160, 250);

context.lineTo(250, 250);

context.lineTo(290,200);

context.lineTo(290,250);

context.quadraticCurveTo(350, 220, 400, 250);

context.lineTo(415, 200);

context.lineTo(415, 250);

context.quadraticCurveTo(430, 220, 490, 250);

context.lineTo(515, 200);

context.lineTo(520, 250);

context.quadraticCurveTo(550, 250, 600, 300);

context.quadraticCurveTo(605, 250, 600, 200);

context.quadraticCurveTo(600, 190, 597, 180);

context.quadraticCurveTo(595, 180, 595, 170);

context.lineTo(595, 169);

context.quadraticCurveTo(595, 160, 589, 160);

context.lineTo(575, 100);

context.quadraticCurveTo(565, 85, 560,75);

context.lineTo(555, 70);

context.quadraticCurveTo(553, 70, 550, 68);

context.quadraticCurveTo(550, 55, 548, 50);

context.quadraticCurveTo(545, 45, 540, 40);

context.lineTo(500, 0);

context.lineTo(300, 0);

context.lineTo(260, 30);

context.lineTo(255, 35);

context.lineTo(250, 40);

context.lineTo(245, 45);

context.lineTo(240, 50);

context.lineTo(200, 100);

context.quadraticCurveTo(180, 130, 175, 140);

context.quadraticCurveTo(170, 145, 165, 190);

context.lineTo(160, 250);

context.stroke();

context.closePath();

var grd = context.createLinearGradient(100, 250, 680, 150);

grd.addColorStop(.05, "rgba(0,0,0,1.00)");

grd.addColorStop(0.5, '#000000');

grd.addColorStop(.75, "rgba(0,0,0,1.00)");

grd.addColorStop(1, "rgba(10,10,10,1.00)");

context.fillStyle = grd;

context.fill();

context.beginPath();

context.moveTo(640, 160);

context.quadraticCurveTo(600, 350, 550, 599);

context.quadraticCurveTo(799, 350, 580, 150);

context.lineTo(640, 160);

context.moveTo(640, 160);

context.quadraticCurveTo(750, 350, 450, 699);

context.quadraticCurveTo(659, 350, 580, 150);

context.lineTo(640, 160);

context.moveTo(640, 160);

context.quadraticCurveTo(650, 350, 550, 799);

context.quadraticCurveTo(700, 350, 580, 150);

context.lineTo(640, 160);

context.stroke();

context.fillStyle = '#111111';

context.fill();

var grd = context.createLinearGradient(0, 550, 150, 150);

grd.addColorStop(0.5, '#000000');

grd.addColorStop(1, "rgba(0,0,0,1.00)");

context.fillStyle = grd;

context.fill();

var centerX = 400;

var centerY = 50

var radius = 80;

var startangle = .5* Math.PI;;

var endangle = 1.5* Math.PI;

context.beginPath();

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

context.fillStyle = "#060606";

context.fill();

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

////NECK

context.beginPath();

//context.moveTo(350, 350);

context.lineTo(250, 600);

context.quadraticCurveTo(360, 550, 250, 300);

context.lineTo(550, 300);

context.quadraticCurveTo(350, 600, 600, 700);

var neck = context.createLinearGradient(0,0,300,600);

neck.addColorStop(0., "rgb(236, 215, 198)");

neck.addColorStop(1, "rgb(198, 138, 83)");

//background

context.closePath();

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = neck;

context.fill();

///HEAD

context.beginPath();

context.moveTo(400, 500); //starting point

context.bezierCurveTo(750,300,500,-100,400,0);

context.bezierCurveTo(385,-100,-10,350,400,500);

context.closePath();

context.fillStyle = head;

var head = context.createRadialGradient(200, 200, 350, 300, 500, 350);

head.addColorStop(0, "tan");

head.addColorStop(1, "brown");

context.strokeStyle = "black";

context.stroke();

context.fill();

//nose

var x = 393;

var y = 180;

// control point coordinates ( magnet )

var cpointX1 = 450;

var cpointY1 = 282;

// control points 2

var cpointx2 = 350;

var cpointy2 = 280;

// ending point coordinates

var x1 = 395;

var y1 = 320;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointx2, cpointy2, x1, y1);

context.lineWidth = 2;

context.strokeStyle = "rgba(205,147,91,1.00)";

context.stroke();

var x = 452;

var y = 180;

// control point coordinates ( magnet )

var cpointX1 = 430;

var cpointY1 = 282;

// control points 2

var cpointx2 = 485;

var cpointy2 = 280;

// ending point coordinates

var x1 = 450;

var y1 = 320;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointx2, cpointy2, x1, y1);

context.lineWidth = 2;

context.strokeStyle = "rgba(205,147,91,1.00)";

context.stroke();

//mouth

var centerX = 440;

var centerY = 370;

var radius = 55;

var startangle = 0;

var endangle = 1.0 * Math.PI;

context.beginPath();

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

context.fillStyle = "#C491C3";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#C491C3";

context.stroke();

var centerX = 460;

var centerY = 373;

var radius = 10;

var startangle = 0;

var endangle = 2.0 * Math.PI;

context.beginPath();

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

context.fillStyle = "#C491C3";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#C491C3";

context.stroke();

var centerX = 425;

var centerY = 373;

var radius = 55;

var startangle = 0;

var endangle = 1.0 * Math.PI;

context.beginPath();

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

context.fillStyle = "#C491C3";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#C491C3";

context.stroke();

var centerX = 370;

var centerY = 385;

var radius = 20;

var startangle = 0;

var endangle = 1.0 * Math.PI;

context.beginPath();

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

context.fillStyle = "C491C3";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#C491C3";

context.stroke();

var centerX = 370;

var centerY = 389;

var radius = 20;

var startangle = 0;

var endangle = 1.0 * Math.PI;

context.beginPath();

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

context.fillStyle = "#C491C3";

context.fill();

context.lineWidth =10;

context.strokeStyle = "#C491C3";

context.stroke();

var x = 335;

var y = 380;

// control point coordinates ( magnet )

var cpointX1 = 430;

var cpointY1 = 330;

// control points 2

var cpointx2 = 412;

var cpointy2 = 400;

// ending point coordinates

var x1 = 455;

var y1 = 360;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointx2, cpointy2, x1, y1);

context.lineWidth = 2;

context.strokeStyle = "rgba(208,156,208,1.00)";

context.stroke();

var x = 455;

var y = 360;

// control point coordinates ( magnet )

var cpointX1 = 575;

var cpointY1 = 370;

// control points 2

var cpointx2 = 412;

var cpointy2 = 500;

// ending point coordinates

var x1 = 335;

var y1 = 380;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointx2, cpointy2, x1, y1);

context.lineWidth = 2;

context.strokeStyle = "rgba(208,156,208,1.00)";

context.stroke();

var x = 335;

var y = 380;

// control point coordinates ( magnet )

var cpointX = 430;

var cpointY = 400;

// ending point coordinates

var x1 = 500;

var y1 = 380;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

context.strokeStyle = "rgba(118,74,118,1.00)";

context.stroke();

//left eye

// eyebrow

var x = 290;

var y = 121;

// control point coordinates ( magnet )

var cpointX = 350;

var cpointY = 90;

// ending point coordinates

var x1 = 380;

var y1 = 121;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

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

context.stroke();

// eye

var x = 298;

var y = 142;

// control point coordinates ( magnet )

var cpointX = 345;

var cpointY = 92;

// ending point coordinates

var x1 = 374;

var y1 = 135;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

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

context.stroke();

var x = 295;

var y = 160;

// control point coordinates ( magnet )

var cpointX = 345;

var cpointY = 92;

// ending point coordinates

var x1 = 380;

var y1 = 160;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(211,167,126,1.00)";

context.stroke();

// bottom curve

var x = 295;

var y = 160;

// control point coordinates ( magnet )

var cpointX = 345;

var cpointY = 170;

// ending point coordinates

var x1 = 380;

var y1 = 160;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

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

context.stroke();

//right eye

// eyebrow

var x = 440;

var y = 121;

// control point coordinates ( magnet )

var cpointX = 500;

var cpointY = 90;

// ending point coordinates

var x1 = 535;

var y1 = 121;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

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

context.stroke();

var x = 450;

var y = 142;

// control point coordinates ( magnet )

var cpointX = 500;

var cpointY = 95;

// ending point coordinates

var x1 = 530;

var y1 = 140;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

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

context.stroke();

var x = 450;

var y = 160;

// control point coordinates ( magnet )

var cpointX = 490;

var cpointY = 90;

// ending point coordinates

var x1 = 530;

var y1 = 160;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgba(211,167,126,1.00)";

context.stroke();

var x = 450;

var y = 160;

// control point coordinates ( magnet )

var cpointX = 500;

var cpointY = 170;

// ending point coordinates

var x1 = 530;

var y1 = 160;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

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

context.stroke();

//flowers

var flower = context.createLinearGradient(0,100,200,400);

flower.addColorStop(0,"rgba(4,10,112,1.00)");

flower.addColorStop(.25,"rgba(34,66,174,1.00)");

flower.addColorStop(.75,"rgba(80,91,174,1.00)");

context.beginPath();

context.moveTo(150,100);

context.bezierCurveTo(-100,-200,-100,100,140,110);

context.bezierCurveTo(-100,70,-50,300,145,115);

context.bezierCurveTo(40,180,80,500,170,115);

context.bezierCurveTo(300,380,330,150,170,100);

context.bezierCurveTo(330,-50,150,-100,150,100);

context.closePath();

context.fillStyle=flower;

context.fill();

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

context.stroke();

//Background flower 2

var flower2 = context.createLinearGradient(650,500,700,700);

flower2.addColorStop(0,"rgba(81,128,240,1.00)");

flower2.addColorStop(.25,"rgba(46,59,157,1.00)");

flower2.addColorStop(.75,"rgba(21,30,84,1.00)");

context.beginPath();

context.moveTo(550,500);

context.bezierCurveTo(300,200,300,500,540,510);

context.bezierCurveTo(300,470,350,700,545,515);

context.bezierCurveTo(440,580,430,900,560,530);

context.bezierCurveTo(640,800,690,550,570,515);

context.bezierCurveTo(810,575,770,400,565,500);

context.bezierCurveTo(730,350,550,200,550,500);

context.closePath();

context.fillStyle=flower2;

context.fill();

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

context.stroke();

//flower 2.5

var flower3 = context.createLinearGradient(650,100,500,100);

flower3.addColorStop(0,"rgba(43,4,228,1.00)");

flower3.addColorStop(.25,"rgba(29,109,192,1.00)");

flower3.addColorStop(1,"rgba(93,95,159,1.00)");

context.beginPath();

context.moveTo(550,100);

context.bezierCurveTo(300,-200,300,100,540,110);

context.bezierCurveTo(300,70,350,300,545,115);

context.bezierCurveTo(440,180,430,500,560,130);

context.bezierCurveTo(640,400,690,150,570,115);

context.bezierCurveTo(810,175,770,0,565,100);

context.bezierCurveTo(730,-150,550,-200,550,100);

context.closePath();

context.fillStyle=flower3;

context.fill();

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

context.stroke();

//background flower 4

context.beginPath();

context.moveTo(687,435);

context.bezierCurveTo(615,390,640,440,680,445);

context.bezierCurveTo(610,440,635,475,685,452);

context.bezierCurveTo(645,505,690,490,695,453);

context.bezierCurveTo(700,510,740,500,700,450);

context.bezierCurveTo(750,455,750,425, 700, 440);

context.bezierCurveTo(700,390,685,390,687,435);

context.closePath();

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

context.fill();

context.lineWidth=1

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

context.stroke();

context.beginPath();

context.arc(690, 445, 6, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(65,55,157,1.00)";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "rgba(0,0, 0,1)"

context.stroke();

//background flower 5

context.beginPath();

context.moveTo(687,135);

context.bezierCurveTo(615,90,640,140,680,145);

context.bezierCurveTo(610,140,635,175,685,152);

context.bezierCurveTo(645,205,690,190,695,153);

context.bezierCurveTo(700,210,740,200,700,150);

context.bezierCurveTo(750,155,750,125, 700, 140);

context.bezierCurveTo(700,90,685,90,687,135);

context.closePath();

context.fillStyle="rgba(117,115,255,1.00)";

context.fill();

context.lineWidth=1

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

context.stroke();

context.beginPath();

context.arc(690, 145, 6, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(68,82,255,1.00)";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "rgba(0,0, 0,1)"

context.stroke();

/// background flower 3

context.beginPath();

context.moveTo(87,495);

context.bezierCurveTo(15,450,40,500,80,505);

context.bezierCurveTo(10,500,35,535,85,512);

context.bezierCurveTo(45,565,90,550,95,513);

context.bezierCurveTo(100,570,140,560,100,510);

context.bezierCurveTo(150,515,150,485, 100, 500);

context.bezierCurveTo(100,450,85,450,87,495);

context.closePath();

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

context.fill();

context.lineWidth=1

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

context.stroke();

context.beginPath();

context.arc(90, 505, 6, 0, 2 * Math.PI, false);

context.fillStyle = "rgba(29,26,129,1.00)";

context.fill();

context.lineWidth = 1;

context.strokeStyle = "rgba(0,0, 0,1)"

context.stroke();

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

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

// CREDITS

context.save();

var credits = "Isabella Troia, Blu Skies, 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>

Search This Blog

Isabella's FMX Blog

Blu Skies

Comments

Post a Comment

Popular posts from this blog

Autoscopy

Logo Tag Brush

Black and White to Color