HTML Canvas Project
HTML Canvas Project
Est. time : 12 hours
I really enjoyed this project. This class is my first experience with Adobe Dreamweaver. I always thought coding was so complicated, but as I was creating this project, the more I worked on it, the easier it became. After a while, I got into my own groove and was able to work on it for hours at a time. I was inspired by a previous student from this class, Maggie Bunting. I had the idea of wanting to create something incorporating ice cream; it's my favorite dessert. When Professor Roundtree showed the class this student example (top picture), ideas for my canvas just popped into my head.
Back home on Long Island, there is The Airport Diner right down the street from me. It is ironically called this because it's across the street from a local airport. My family traditionally goes to this diner every holiday after church. Now, when I fly home for breaks and holidays, my mom always brings me to the diner to get chicken noodle soup, which is what I always get there. They are open 24/7 so even at 3am I can get soup.
In this canvas, I wanted to incorporate my two favorite things, my diner and ice cream. Although it's not chicken noodle soup, the diner has really good ice cream too. The diner reminds me of home, and I love old style type restaurants with the checkered walls, amazing food and red booths. I chose the three main flavors of ice cream because of two things: i love chocolate ice cream, and you just can't beat the classics.
I had a great time making this canvas and am extremely proud of how it turned out.
I had a great time making this canvas and am extremely proud of how it turned out.
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//BACKGROUND
//SQUARE RIGHT CORNER 1
var x= 0;
var y= 0;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE TOP 2
var x= 100;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE TOP 3
var x= 200;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE TOP 4
var x= 300;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)'
context.fill();
context.stroke();
//SQUARE TOP 5
var x= 400;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE TOP 6
var x= 500;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE TOP 7
var x= 600;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE TOP 8
var x= 700;
var y= 0;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 1
var x= 0;
var y= 100;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 2
var x= 100;
var y= 100;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 3
var x= 200;
var y= 100;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 4
var x= 300;
var y= 100;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 5
var x= 400;
var y= 100;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 6
var x= 500;
var y= 100;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 7
var x= 600;
var y= 100;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 2 COLUMN 8
var x= 700;
var y= 100;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 1
var x= 0;
var y= 200;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(240, 240, 240)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 2
var x= 100;
var y= 200;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE R0W 3 COLUMN 3
var x= 200;
var y= 200;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 4
var x= 300;
var y= 200;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 5
var x= 400;
var y= 200;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 6
var x= 500;
var y= 200;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 7
var x= 600;
var y= 200;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 3 COLUMN 8
var x= 700;
var y= 200;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 1
var x= 0;
var y= 300;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 2
var x= 100;
var y= 300;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 3
var x= 200;
var y= 300;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 4
var x= 300;
var y= 300;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 5
var x= 400;
var y= 300;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 6
var x= 500;
var y= 300;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 7
var x= 600;
var y= 300;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 4 COLUMN 8
var x= 700;
var y= 300;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 1
var x= 0;
var y= 400;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 2
var x= 100;
var y= 400;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 3
var x= 200;
var y= 400;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 4
var x= 300;
var y= 400;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 5
var x= 400;
var y= 400;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 6
var x= 500;
var y= 400;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 7
var x= 600;
var y= 400;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207, 207, 207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 5 COLUMN 8
var x= 700;
var y= 400;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 1
var x= 0;
var y= 500;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 2
var x= 100;
var y= 500;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 3
var x= 200;
var y= 500;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 4
var x= 300;
var y= 500;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();//SQUARE ROW 6 COLUMN 5
var x= 400;
var y= 500;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 6
var x= 500;
var y= 500;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 7
var x= 600;
var y= 500;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 6 COLUMN 8
var x= 700;
var y= 500;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 1
var x= 0;
var y= 600;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207,207,207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 2
var x= 100;
var y= 600;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 3
var x= 200;
var y= 600;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207,207,207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 4
var x= 300;
var y= 600;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 5
var x= 400;
var y= 600;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207,207,207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 6
var x= 500;
var y= 600;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 7
var x= 600;
var y= 600;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255,255,255)");
grd.addColorStop(0.9999, "rgb(207,207,207)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 7 COLUMN 8
var x= 700;
var y= 600;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 1
var x= 0
var y= 700;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 2
var x= 100
var y= 700;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 3
var x= 200;
var y= 700;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 4
var x= 300;
var y= 700;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 5
var x= 400;
var y= 700;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 6
var x= 500;
var y= 700;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 7
var x= 600;
var y= 700;
var width = 100
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.fillStyle = 'rgb(0,0,0)'
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//SQUARE ROW 8 COLUMN 8
var x= 700;
var y= 700;
var width = 100;
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.strokeStyle = 'rgb(255,255,255)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(207, 207, 207)");
grd.addColorStop(0.9999, "rgb(255,255,255)");
context.fillStyle = grd;
context.fill();
context.stroke();
// TABLE RECTANGLE
context.beginPath();
context.moveTo(0,775);
context.lineTo(0,950);
context.lineTo(800,950);
context.lineTo(800,775);
context.lineTo(100,775);
context.strokeStyle = 'rgb(130, 0, 33)';
context.lineWidth = '5';
context.fill();
context.stroke();
context.closePath();
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0.0001, "rgb(150, 0, 38)");
grd.addColorStop(0.9999, "rgb(204, 0, 51)");
context.fillStyle = grd;
context.fill();
context.stroke();
//TABLE UNDERNEATH
context.beginPath();
context.moveTo(0,900);
context.lineTo(0,1000);
context.lineTo(800,1000);
context.lineTo(800,900);
context.lineTo(0,900);
context.strokeStyle = 'rgb(15, 0, 4)';
context.fillStyle = 'rgb(15, 0, 4)';
context.lineWidth = '5';
context.fill();
context.stroke();
context.closePath();
//TABLE STAND
context.beginPath();
context.moveTo(350,900);
context.lineTo(350,1000);
context.lineTo(450,1000);
context.lineTo(450,900);
context.lineTo(350,900);
context.strokeStyle = 'rgb(64,0,16)';
context.fillStyle = 'rgb(87, 0, 22)';
context.lineWidth = '5';
context.fill();
context.stroke();
context.closePath();
// TABLE SIDE FRONT
context.beginPath();
context.moveTo(0,850);
context.lineTo(0,900);
context.lineTo(800,900);
context.lineTo(800,850);
context.lineTo(0,850);
context.strokeStyle = 'rgb(122, 0, 31)';
context.lineWidth = '5';
context.fill();
context.stroke();
context.closePath();
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0.0001, "rgb(130, 0, 33)");
grd.addColorStop(0.9999, "rgb(150, 0, 38)");
context.fillStyle = grd;
context.fill();
context.stroke();
//BEIZER CURVE
var x = 0;
var y = 50;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 350;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(115, 102, 255)";
context.lineCap = 'round'
context.stroke();
//BEIZER CURVE
var x = 0;
var y = 0;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 300;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(255, 249, 168)";
context.lineCap = 'round'
context.stroke();
//BEIZER CURVE
var x = 0;
var y = -50;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 250;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(115, 102, 255)";
context.lineCap = 'round'
context.stroke();
//BEIZER CURVE
var x = 0;
var y = -100;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 200;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(255, 249, 168)";
context.lineCap = 'round'
context.stroke();
//BEIZER CURVE
var x = 0;
var y = -150;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 150;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(115, 102, 255)";
context.lineCap = 'round'
context.stroke();
//BEIZER CURVE
var x = 0;
var y = -200;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 100;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(255, 249, 168)";
context.lineCap = 'round'
context.stroke();
//BEIZER CURVE
var x = 0;
var y = -250;
// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 6;
var cpointY1 = canvas.height / 2 + 50;
// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width / 1.5;
var cpointY2 = canvas.height / 2 - 1000;
// ending point coordinates
var x1 = 800;
var y1 = 50;
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);
context.lineWidth = 2;
context.strokeStyle = "rgb(115, 102, 255)";
context.lineCap = 'round'
context.stroke();
//MENU
var x=50;
var y=620;
var width = 100;
var height= 190;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 4;
context.strokeStyle = 'rgb(115, 102, 255)';
context.fillStyle = 'rgb(255, 249, 168)';
context.fill();
context.fill();
context.stroke();
//Text
context.font = 'Bold 15pt Helvetica';
context.fillStyle = 'rgb(115, 102, 255)';
context.fillText('MENU',64,648);
//Vanilla
context.font = 'Bold italic 10pt Helvetica';
context.fillStyle = 'rgb(255, 97, 134)';
context.fillText('Vanilla',64,670);
//Chocolate
context.font = 'Bold italic 10pt Helvetica';
context.fillStyle = 'rgb(255, 97, 134)';
context.fillText('Chocolate',64,685);
//Strawberry
context.font = 'Bold italic 10pt Helvetica';
context.fillStyle = 'rgb(255, 97, 134)';
context.fillText('Strawberry',64,700);
//Toppings
context.font = 'Bold 12pt Helvetica';
context.fillStyle = 'rgb(115, 102, 255)';
context.fillText('TOPPINGS',60,730);
//Sprinkles
context.font = 'Bold italic 10pt Helvetica';
context.fillStyle = 'rgb(255, 97, 134)';
context.fillText('Sprinkles',60,755);
// Cherry
context.font = 'Bold italic 10pt Helvetica';
context.fillStyle = 'rgb(255, 97, 134)';
context.fillText('Cherry',60,775);
//SCOOP ONE - BOTTOM
var x = canvas.width / 1.68;
var y = canvas.height / 1.4;
var radius = 80;
var startAngle = 0.15 * Math.PI;
var endAngle = 0.85 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(97, 69, 49)';
context.stroke();
// x and y coordinates of circle
var circlecenterX = canvas.width / 2;
var circlecenterY = canvas.height / 2;
var radius = 1000;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = true;
context.fillStyle = 'rgb(97, 69, 49)';
context.fill();
//SCOOP TWO - BOTTOM
var x = canvas.width / 2.26;
var y = canvas.height / 1.4;
var radius = 80;
var startAngle = 0.15 * Math.PI;
var endAngle = 0.85 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(255, 229, 217)';
context.stroke();
// x and y coordinates of circle
var circlecenterX = canvas.width / 2;
var circlecenterY = canvas.height / 2;
var radius = 1000;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = true;
context.fillStyle = 'rgb(255, 229, 217)';
context.fill();
//SCOOP THREE - TOP
var x = canvas.width / 1.92;
var y = canvas.height / 1.6;
var radius = 80;
var startAngle = 0.15 * Math.PI;
var endAngle = 0.85 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(255, 176, 242)';
context.stroke();
// x and y coordinates of circle
var circlecenterX = canvas.width / 2;
var circlecenterY = canvas.height / 2;
var radius = 1000;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = true;
context.fillStyle = 'rgb(255, 176, 242)';
context.fill();
//TOP SCOOP ARC LEFT
var centerX = canvas.width / 2.28;
var centerY = canvas.height / 1.54;
var radius = 20;
var startangle = 0.3;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 176, 242)';
context.fillStyle = 'rgb(255, 176, 382)';
context.fill();
context.stroke();
//SCOOP ARC SECOND
var centerX = canvas.width / 2.14;
var centerY = canvas.height / 1.54;
var radius = 20;
var startangle = 0.3;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 176, 242)';
context.fillStyle = 'rgb(255, 176, 382)';
context.fill();
context.stroke();
//SCOOP ARC THIRD
var centerX = canvas.width / 1.98;
var centerY = canvas.height / 1.54;
var radius = 20;
var startangle = 0.3;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 176, 242)';
context.fillStyle = 'rgb(255, 176, 382)';
context.fill();
context.stroke();
//SCOOP ARC FOURTH
var centerX = canvas.width / 1.86;
var centerY = canvas.height / 1.54;
var radius = 20;
var startangle = 0.3;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 176, 242)';
context.fillStyle = 'rgb(255, 176, 382)';
context.fill();
context.stroke();
//SCOOP ARC FIFTH
var centerX = canvas.width / 1.74;
var centerY = canvas.height / 1.54;
var radius = 20;
var startangle = 0.3;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 176, 242)';
context.fillStyle = 'rgb(255, 176, 382)';
context.fill();
context.stroke();
//TOP SCOOP ARC RIGHT
var centerX = canvas.width / 1.65;
var centerY = canvas.height / 1.54;
var radius = 20;
var startangle = 0;
var endangle = 2* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(255, 176, 242)';
context.fillStyle = 'rgb(255, 176, 382)';
context.fill();
context.stroke();
//CHERRY
var centerX = canvas.width / 1.78;
var centerY = canvas.height / 1.8;
var radius = 30;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "rgb(230, 76, 76)");
grd.addColorStop(1, "rgb(171, 0, 0)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "rgb(135, 0, 0)";
context.stroke();
//cherry dot
var centerX = canvas.width / 1.72;
var centerY = canvas.height / 1.86;
var radius = 3;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(135, 0, 0)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "rgb(208, 37, 31)";
context.stroke();
//stem
var startX = 466;
var startY = 538;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1.68;
var cpointY = canvas.height / 1.98 ;
// ending point coordinates
var endX = 460;
var endY = 490;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 3;
context.strokeStyle = "rgb(135, 0, 0)";
context.stroke();
//BOWL - QUAD CURVE
var x = 244;
var y = 716;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 388;
var cpointY = canvas.height / 1.82 + 395;
// ending point coordinates
var x1 = 582;
var y1 = 716;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 4;
context.strokeStyle = "rgb(116, 127, 153)";
context.fillStyle = 'rgb(160, 169, 189)';
context.fill();
context.stroke();
//BOWL LINE - QUAD CURVE
// starting point coordinates
var x = 448;
var y = 815;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1 - 300;
var cpointY = canvas.height / 2 + 300;
// ending point coordinates
var x1 = 550;
var y1 = 740;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 4;
context.strokeStyle = "rgb(99, 107, 125)";
context.stroke();
//TEXT - NAME
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "Bold 14px Cambria";
ctx.fillStyle = 'rgb(255, 249, 168)';
ctx.fillText("Morgan Gaffney", 685, 888);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="1000"></canvas>
</body>
</html>
Comments
Post a Comment