Canvas Project
Sarah Weisman
Reach For The Stars
Fall 2020
This was a very tedious process but in the end it was worth it to experience the way a new program works. I made a shooting star that has rectangles, triangles and circles coming out of it. The white dots resemble stars from far away. I also have a gradient background that is dark blue which gives the effect that is it night time. This took approximately 14 hours of working and a bunch of time redoing a lot of codes.
My inspiration for this was stars. I took it a step further and added the lines that make it look like a shooting star. I used the rectangles, circles and triangles to make it look like the star was giving off a colorful "dust". As someone who has never used Dreamweaver before I am impressed with my self for having the patience for this tedious task.
Total time spent on project: 14 hours
CODE:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- </title>
<!-- import external .js scripts here -->
<!-- <script type="text/javascript" src="#" ></script> -->
<!-- modify CSS properties here -->
<style type="text/css">
body,td,th {
font-family: Monaco, "Courier New", "monospace";
font-size: 14px;
color: rgba(255,255,255,1);
}
body {
background-color: rgba(0,0,0,1);
}
#container {
position: relative;
text-align: left;
width: 95%;
height: 800px;
}
#fmxCanvas {
position: relative;
background-color:rgba(255,255,255,1);
border: rgba(255,255,255,1) thin dashed;
cursor: crosshair;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<!-- START HTML CODE HERE -->
<canvas id="fmxCanvas" width="800" height="600"></canvas>
<div id="display"></div>
<!-- FINISH HTML CODE HERE -->
</div>
<script>
///////////////////////////////////////////////////////////////////////
// DECLARE requestAnimFrame
var rAF = window.requestAnimFrame ||
window.mozRequestAnimFrame ||
window.webkitRequestAnimFrame ||
window.msRequestAnimFrame;
var fps = 30;
window.requestAnimFrame = (
function(callback) {
return rAF ||
function(callback) {
window.setTimeout(callback, 1000 / fps);
};
})();
///////////////////////////////////////////////////////////////////////
// DEFINE GLOBAL VARIABLES HERE
var canvas;
var context;
canvas = document.getElementById("fmxCanvas");
context = canvas.getContext("2d");
var canvas1;
var context1;
canvas1 = document.createElement("canvas");
context1 = canvas1.getContext("2d");
canvas1.width = canvas.width;
canvas1.height = canvas.height;
var display;
display = document.getElementById('display');
var counter;
///////////////////////////////////////////////////////////////////////
// DEFINE YOUR GLOBAL VARIABLES HERE
///////////////////////////////////////////////////////////////////////
// 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
////Radial Gradient - example
// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, canvas.width, canvas.height);
// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 200;
// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 400;
// create radial gradient
var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);
// inner color
grd.addColorStop(0, "rgba(0,80,255,.90)");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgba(7,7,180,.90)");
// outer color
grd.addColorStop(1, "rgba(8,43,120,1.00)");
context.fillStyle = grd;
context.fill();
//shooting star 1
context.beginPath();
context.moveTo(420,260);
context.quadraticCurveTo(350,2,0,300);
context.lineTo(0,400);
context.quadraticCurveTo(315,120,400,250);
context.closePath();
context.fillStyle="rgba(255,255,255,1.00)"
context.fill();
context.strokeStyle = 'black'
context.lineWidth=1
context.stroke();
//shooting star 2
context.beginPath();
context.moveTo(420,260);
context.quadraticCurveTo(380,20,0,400);
context.lineTo(0,500);
context.quadraticCurveTo(315,120,400,250);
context.closePath();
context.fillStyle="rgba(64,230,235,1.00)"
context.fill();
context.strokeStyle = 'black'
context.lineWidth=1
context.stroke();
//shooting star 3
context.beginPath();
context.moveTo(450,260);
context.quadraticCurveTo(400,20,0,500);
context.lineTo(0,600);
context.quadraticCurveTo(365,120,400,250);
context.closePath();
context.fillStyle="rgba(166,64,235,1.00)"
context.fill();
context.strokeStyle = 'black'
context.lineWidth=1
context.stroke();
//Rectangle 1
var x=20;
var y=300;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 2
var x=50;
var y=275;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 3
var x=70;
var y=300;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 4
var x=100;
var y=275;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 5
var x=10;
var y=335;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 5
var x=40;
var y=325;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 6
var x=80;
var y=248;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 7
var x=120;
var y=245;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 8
var x=140;
var y=215;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 9
var x=170;
var y=215;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 10
var x=185;
var y=190;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 11
var x=215;
var y=175;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 12
var x=245;
var y=170;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Rectangle 13
var x=275;
var y=160;
var width = 10
var height= 10;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 10;
//context.fillStyle = 'rgb(0,255,0)';
context.strokeStyle = 'rgba(0,219,255,1.00)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
context.fill();
context.stroke();
//Circle
context.beginPath();
context.arc(252, 210, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(32, 410, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(72, 350, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(102, 350, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(202, 250, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(132, 295, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(232, 240, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(75, 389, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(15, 450, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(50, 387, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(115, 317, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(160, 295, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(180, 280, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(140, 321, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(300, 189, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(222,20,240,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(190,17,248,1.00)';
context.stroke();
// green TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(52,445); // point A coordinates
context.lineTo(80, 422); // point B coords
context.lineTo(80,455); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(0,255,2,1.00)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// green TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(52,445); // point A coordinates
context.lineTo(80, 422); // point B coords
context.lineTo(80,455); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(0,255,2,1.00)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// green TRIANGLE 2
context.beginPath(); // begin a shape
context.moveTo(52,485); // point A coordinates
context.lineTo(10, 522); // point B coords
context.lineTo(30,550); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(0,255,2,1.00)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// green TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(110,395); // point A coordinates
context.lineTo(170, 380); // point B coords
context.lineTo(150,405); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(0,255,2,1.00)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// green TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(200,295); // point A coordinates
context.lineTo(190, 346); // point B coords
context.lineTo(170,325); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(0,255,2,1.00)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// green TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(300,220); // point A coordinates
context.lineTo(250, 259); // point B coords
context.lineTo(276,269); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(0,255,2,1.00)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// star top TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(500,10); // point A coordinates
context.lineTo(560, 159); // point B coords
context.lineTo(440,159); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// star left TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(265,159); // point A coordinates
context.lineTo(440, 280); // point B coords
context.lineTo(440,159); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// star right TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(700,159); // point A coordinates
context.lineTo(560, 280); // point B coords
context.lineTo(440,159); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// star middle TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(440,159); // point A coordinates
context.lineTo(560, 280); // point B coords
context.lineTo(440,280); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// star bottom left TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(355,440); // point A coordinates
context.lineTo(500, 325); // point B coords
context.lineTo(400,250); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
// star bottom right TRIANGLE
context.beginPath(); // begin a shape
context.moveTo(645,440); // point A coordinates
context.lineTo(560, 180); // point B coords
context.lineTo(440,280); // point C coords
context.closePath(); // close the shape
context.lineWidth = 5; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.fillStyle = "rgba(0,255,67,1.00)";
context.fill();
//white orbs
//Circle
context.beginPath();
context.arc(300, 35, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(370, 100, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(770, 50, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(600, 100, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(470, 433, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(260, 560, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(233, 465, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(533, 565, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
//Circle
context.beginPath();
context.arc(733, 465, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255,255,255,1.00)' ;
context.fill();
context.lineWidth =1;
context.strokeStyle = 'rgba(255,255,255,1.00)';
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Sarah Weisman, Reach For The Sky, FMX 210-1, FA 2020";
context.font = 'bold 14px Helvetica';
context.fillStyle = "rgba(0,0,0,1)"; // change the color here
context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here
context.shadowBlur = 12;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE
context.restore();
//////////////////////////////////////////////////////////////////
// HTML DISPLAY FIELD FOR TESTING PURPOSES
display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);
/////////////////////////////////////////////////////////////////
// LAST LINE CREATES THE ANIMATION
requestAnimFrame(draw); // CALLS draw() every nth of a second
}
</script>
</body>
</html>
Comments
Post a Comment