Canvas Project
Sabrina Stern
My Dreamweaver project is a bowl of various fruits. My inspiration behind it is seeing many different artists take on this classic subject matter, so I decided to create my own version of a bowl of fruit. Using Dreamweaver codes, the shapes are very simple and almost cartoonish, and unrealistic looking because this is a work of abstract art even though it resembles a bowl of fruit. This is my first time using this program and my brain can’t work with numbers so I tried my best and after many hours of playing with coordinates, I was able to create this bowl of fruit. Every fruit is a different color with a different colored stem for variety. To the left there is a green apple with a blue stem, followed by a red apple with a long, green stem, and to the left there’s an orange with a pink stem. I made the background a gradient for an artistic effect.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>project 2</title>
</head>
<body>
</body>
</html>
<!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
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
//S//Simple V line in pink
var x= 60;
var y = 200;
var x1 = 300;
var y1 = 500;
var x2 = 250;
var y2 = 500;
var x3 = 200;
var y3 = 340;
//comment
context.beginPath();
context.lineTo(x2, y2); // move to starting coordinates
context.lineTo(x3, y3); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(0,200,400)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "red";
var centerX = 400;
var centerY = 400;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "green";
context.lineWidth = 80;
context.strokeStyle = "black";
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "green";
var centerX = 250;
var centerY = 430;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "orange";
var centerX = 480;
var centerY = 400;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
//S//Simple V line in pink
var x= 70;
var y = 400;
var x1 = 300;
var y1 = 100;
var x2 = 650;
var y2 = 200;
var x3 = 200;
var y3 = 450;
//comment
context.beginPath();
context.lineTo(x2, y2); // move to starting coordinates
context.lineTo(x3, y3); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(200,200,60)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "green";
var centerX = 250;
var centerY = 430;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "red";
var centerX = 400;
var centerY = 400;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "orange";
var centerX = 480;
var centerY = 400;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 0;
context.strokeStyle = "black";
context.stroke();
//S//Simple V line in pink
var x= 700;
var y = 50;
var x1 = 700;
var y1 = 200;
var x2 = 470;
var y2 = 300;
var x3 = 600;
var y3 = 2090;
//comment
context.beginPath();
context.lineTo(x2, y2); // move to starting coordinates
context.lineTo(x3, y3); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(400,180,600)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "orange";
var centerX = 480;
var centerY = 400;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 0;
context.strokeStyle = "black";
context.stroke();
////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, "yellow");
// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "orange");
// outer color
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
//S//Simple V line in pink
var x= 60;
var y = 200;
var x1 = 300;
var y1 = 500;
var x2 = 250;
var y2 = 500;
var x3 = 200;
var y3 = 340;
//comment
context.beginPath();
context.lineTo(x2, y2); // move to starting coordinates
context.lineTo(x3, y3); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(0,200,400)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "red";
var centerX = 400;
var centerY = 400;
var radius = 60;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "green";
context.lineWidth = 80;
context.strokeStyle = "black";
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "green";
var centerX = 250;
var centerY = 430;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "orange";
var centerX = 480;
var centerY = 400;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
//S//Simple V line in pink
var x= 70;
var y = 400;
var x1 = 300;
var y1 = 100;
var x2 = 650;
var y2 = 200;
var x3 = 200;
var y3 = 450;
//comment
context.beginPath();
context.lineTo(x2, y2); // move to starting coordinates
context.lineTo(x3, y3); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(200,200,60)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 50;
context.strokeStyle = "black";
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "green";
var centerX = 250;
var centerY = 430;
var radius = 30;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "red";
var centerX = 400;
var centerY = 400;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "orange";
var centerX = 480;
var centerY = 400;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 0;
context.strokeStyle = "black";
context.stroke();
//S//Simple V line in pink
var x= 700;
var y = 50;
var x1 = 700;
var y1 = 200;
var x2 = 470;
var y2 = 300;
var x3 = 600;
var y3 = 2090;
//comment
context.beginPath();
context.lineTo(x2, y2); // move to starting coordinates
context.lineTo(x3, y3); // move to starting coordinates
context.lineCap = 'square';
context.lineWidth = 10;// declare the width in pixels of the line
context.strokeStyle = 'rgb(400,180,600)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//Line Caps
//context.lineCap = "butt"; // "round" or "square"
//Line Joins
//context.lineJoin = "miter"; // "round" or "bevel"
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.fill();
context.lineWidth = 100;
context.strokeStyle = "orange";
var centerX = 480;
var centerY = 400;
var radius = 20;
context.beginPath();
context.arc(centerX, centerY, radius, Math.PI/2, 2*Math.PI, false);
context.stroke();
//top arc
var centerX = 350;
var centerY = 400
var radius = 200;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "purple";
context.stroke();
//botom arc
var centerX = canvas.width / 0;
var centerY = canvas.height / 2;
var radius = 70;
var startangle = 1.9;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.lineWidth = 0;
context.strokeStyle = "black";
context.stroke()
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
///////////////////////////////////////////////////////////////////
// CREDITS
context.save();
var credits = "Name, Title, FMX XYZ, FA/SP YEAR";
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>
This piece turned out really nice. I love the difference between your original drawing and the actual piece. I think the style is satisfying to look at and easy to identify as a bowl of fruit.
ReplyDeleteYour work turned out really good. You clearly have artistic talent based off the sketch you drew. I had a lot of trouble manipulating code and I know how hard it is so this is very impressive. The colors stand out because of their brightness and I love the gradient used for the rays coming off of the sun.
ReplyDelete