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

Popular posts from this blog

Magazine Callout

-
Image
 Magazine Callout     For the magazine callout I made the title in a fancy font to emphasize the article.  I then changed the font and color of the callout quotes and placed a black frame around the quotes.  I placed the first photo in a circle frame because I thought it went well with the font I chose for the title.  For the second photo I kept it rectangle so it fit with the text.  I can't wait to explore more with InDesign and make my portfolio neat and well planned.  
Read more

PORTFOLIO

-
Image
DIGITAL MEDIA PORTFOLIO Throughout this course I have been challenged to use my creative skills in new ways through different programs.  I enjoyed creating my own pieces of art (with guidelines of course) and expressing myself.  This portfolio is a way to present all of my pieces in one concise place.  I am really happy with my progress I have made in this course and I have learned so much about what I want to do in the future.  I definitely want to continue with my major that I chose.  I feel like I can do a lot with designing and different projects for a job in the near future.  I have come a long way since the beginning of the semester and I am extremely satisfied with my portfolio.
Read more

Postcard

-
Image
  Postcard            For my postcard I decided to make it from the zoo in Tampa.  The zoo is called ZooTampa at Lowry Park.  I think the pattern I chose for the background is really intriguing and will attract people.  When people receive this in the mail they will see the bright colors and be happy to see that it was from their friend or family member.  I placed my logo under the location on the front and next to the name of the zoo on the back.  I made it pretty small so it did not take away from the post card design or message.        
Read more