Canvas Project 1
Hours: 12 est.
I am very proud of the final outcome of my project. I had never used Dreamweaver, and the thought of using code to create an original idea was very daunting. However, after learning the basic concepts of code and using trial and error, I started to really enjoy using Dreamweaver.
I created my image with arcs for the ice cream, abstract shapes for the background, and too many lines to count. In the end, I had over 2000 lines of code. My piece is successful because I paid attention to detail and used precision when creating my design.
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//background
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'rgb(255, 249, 162)';
context.fill();
context.lineWidth = 10;
context.strokeStyle = 'rgb(218, 247, 166)';
context.stroke();
//SQUARE CORNER 10
var x=-5;
var y=155;
var width = 110
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.stroke();
//MENU
var x=-10;
var y=-10;
var width = 220
var height= 220;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 5;
context.strokeStyle = 'rgb(218, 247, 166)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255, 249, 162)");
grd.addColorStop(.3, "rgb(255, 255, 255)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.stroke();
//QUADRATIC CURVE
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(442, 945);
ctx.quadraticCurveTo(590, 1000, 700, 945);
ctx.stroke();
//QUADRATIC CURVE 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(490, 900);
ctx.quadraticCurveTo(600, 960, 700, 900);
ctx.stroke();
//QUADRATIC CURVE 3
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(535, 860);
ctx.quadraticCurveTo(600, 900, 700, 860);
ctx.stroke();
//QUADRATIC CURVE 4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(576, 820);
ctx.quadraticCurveTo(620, 850, 700, 820);
ctx.stroke();
//QUADRATIC CURVE 5
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(605, 780);
ctx.quadraticCurveTo(640, 810, 700, 780);
ctx.stroke();
//QUADRATIC CURVE 6
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(640, 740);
ctx.quadraticCurveTo(660, 760, 700, 740);
ctx.stroke();
//QUADRATIC CURVE 7
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(670, 700);
ctx.quadraticCurveTo(675, 720, 700, 700);
ctx.stroke();
//QUADRATIC CURVE TOP 1
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(210, 140);
ctx.quadraticCurveTo(350, 60, 510, 140);
ctx.stroke();
//QUADRATIC CURVE TOP 2
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(210, 100);
ctx.quadraticCurveTo(350, 20, 548, 105);
ctx.stroke();
//QUADRATIC CURVE TOP 3
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(210, 60);
ctx.quadraticCurveTo(360, -20, 610, 85);
ctx.stroke();
//QUADRATIC CURVE TOP 4
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(210, 15);
ctx.quadraticCurveTo(390, -100, 635, 40);
ctx.stroke();
//SQUARE CORNER BEHIND BEZIER
var x=195;
var y=900;
var width = 95
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.65, "rgb(255, 249, 162)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.fill();
// BEZIER CURVE
for (var i=0; i<canvas.height; i+=10) {
var startX = -240;
var startY = 1300;
// starting point coordinates
var endX = 700;
var endY = 0;
var cpoint1X = canvas.width;
var cpoint1Y = canvas.height;
var cpoint2X = i;
var cpoint2Y = 350;
context.beginPath();
context.moveTo(startX, startY); ///cpoint1Y
context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);
context.lineWidth = 1.5;
context.strokeStyle = "rgba(128, 235, 212, .8)";
context.stroke();
}
//SQUARE CORNER
var x=5;
var y=900;
var width = 95
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255, 249, 162)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(128, 219, 212)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 2
var x=100;
var y=805;
var width = 95
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 3
var x=195;
var y=710;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255, 249, 162)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(128, 219, 212)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 4
var x=1;
var y=711;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 5
var x=100;
var y=617;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255, 249, 162)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(128, 219, 212)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 6
var x=199;
var y=523;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 7
var x=1;
var y=523;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255, 249, 162)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(128, 219, 212)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 8
var x=101;
var y= 430
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
//SQUARE CORNER 9
var x=1;
var y=336;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(128, 219, 212)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(255, 249, 162)");
context.fillStyle = grd;
context.fill();
context.stroke();
//SQUARE CORNER 10
var x=101;
var y=242;
var width = 100
var height= 95;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 0;
context.strokeStyle = 'rgb(255, 249, 162)';
// add linear gradient
var grd = context.createLinearGradient(x, y, x+width, y+height);
grd.addColorStop(0, "rgb(255, 249, 162)");
grd.addColorStop(0.5, "rgb(172, 255, 239)");
grd.addColorStop(1, "rgb(128, 219, 212)");
context.fillStyle = grd;
context.fill();
context.stroke();
//CONE OUTLINE
var x= 200;
var y = 520;
var x1 = 350;
var y1 = 950;
var x2 = 500;
var y2 = 520;
var x3 = 200;
var y3 = 520
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineTo(x2, y2); // draw line to following point
context.lineTo(x3, y3); // draw line to following point
context.lineCap = 'square';
context.lineWidth = 8;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
context.fillStyle = 'rgb(204, 137, 93)';
context.fill();
//CONE LINES (left side)
var x= 233;
var y = 520;
var x1 = 365;
var y1 = 910
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (second from left)
var x= 258;
var y = 520;
var x1 = 380;
var y1 = 868
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (third from left)
var x= 285;
var y = 520;
var x1 = 395;
var y1 = 825
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (fourth from left)
var x= 315;
var y = 520;
var x1 = 410;
var y1 = 780
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (fifth from left)
var x= 343;
var y = 520;
var x1 = 425;
var y1 = 737
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (sixth from left)
var x= 375;
var y = 520;
var x1 = 440;
var y1 = 693
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (seventh from left)
var x= 407;
var y = 520;
var x1 = 455;
var y1 = 649
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (eighth from left)
var x= 432;
var y = 520;
var x1 = 470;
var y1 = 610
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (ninth from left)
var x= 458;
var y = 520;
var x1 = 480;
var y1 = 578
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (tenth from left)
var x= 483;
var y = 520;
var x1 = 495;
var y1 = 538
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (right side)
var x= 483;
var y = 520;
var x1 = 340;
var y1 = 920
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (second from right)
var x= 459;
var y = 520;
var x1 = 325;
var y1 = 880
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (third from right)
var x= 432;
var y = 520;
var x1 = 310;
var y1 = 840
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (fourth from right)
var x= 407;
var y = 520;
var x1 = 300;
var y1 = 805
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (fifth from right)
var x= 375;
var y = 520;
var x1 = 285;
var y1 = 768
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (sixth from right)
var x= 343;
var y = 520;
var x1 = 268;
var y1 = 720
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (seventh from right)
var x= 315;
var y = 520;
var x1 = 255;
var y1 = 680
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (eighth from right)
var x= 285;
var y = 520;
var x1 = 240;
var y1 = 640
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (ninth from right)
var x= 258;
var y = 520;
var x1 = 225;
var y1 = 595
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//CONE LINES (tenth from right)
var x= 233;
var y = 520;
var x1 = 212;
var y1 = 560
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(83, 57, 39)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//FIRST ARC BOTTOM SCOOP
var x = canvas.width / 3.45;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 1.7 * Math.PI;
var endAngle = 2.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//SECOND ARC BOTTOM SCOOP
var x = canvas.width / 2.85;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//THIRD ARC BOTTOM SCOOP
var x = canvas.width / 2.4;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//FOURTH ARC BOTTOM SCOOP
var x = canvas.width / 2.1;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//FIFTH ARC BOTTOM SCOOP
var x = canvas.width / 1.85;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//SIXTH ARC BOTTOM SCOOP
var x = canvas.width / 1.65;
var y = canvas.height / 2;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//SEVENTH ARC BOTTOM SCOOP
var x = canvas.width / 1.45;
var y = canvas.height / 2;
var radius = 31;
var startAngle = 0.9 * Math.PI;
var endAngle = 1 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//BOTTOM SCOOP
var x = canvas.width / 2;
var y = canvas.height / 2.4;
var radius = 150;
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(125, 241, 121)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true;
context.fillStyle = 'rgb(125, 241, 121)';
context.fill();
//FLAVORS TEXT
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "40px Courier";
ctx.fillStyle = 'rgb(18, 181, 179)';
ctx.textAlign = "top left";
ctx.fillText("Flavors", 20, 50);
//CHOCOLATE
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "22px Courier";
ctx.fillStyle = 'rgb(67, 54, 48)';
ctx.textAlign = "top left";
ctx.fillText("Chocolate", 35, 90);
//VANILLA
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "22px Courier";
ctx.fillStyle = 'rgb(124, 120, 111)';
ctx.textAlign = "top left";
ctx.fillText("Vanilla", 50, 120);
//STRAWBERRY
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "22px Courier";
ctx.fillStyle = 'rgb(248, 83, 211)';
ctx.textAlign = "top left";
ctx.fillText("Strawberry", 32, 150);
//MINT CHIP
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "22px Courier";
ctx.fillStyle = 'rgb(31, 197, 141)';
ctx.textAlign = "top left";
ctx.fillText("Mint Chip", 40, 180);
//FIRST ARC TOP SCOOP
var x = canvas.width / 3.45;
var y = canvas.height / 3;
var radius = 30;
var startAngle = 1.7 * Math.PI;
var endAngle = 2.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//SECOND ARC TOP SCOOP
var x = canvas.width / 2.85;
var y = canvas.height / 3;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//THIRD ARC TOP SCOOP
var x = canvas.width / 2.4;
var y = canvas.height / 3;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//FOURTH ARC TOP SCOOP
var x = canvas.width / 2.1;
var y = canvas.height / 3;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//FIFTH ARC TOP SCOOP
var x = canvas.width / 1.85;
var y = canvas.height / 3;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//SIXTH ARC TOP SCOOP
var x = canvas.width / 1.65;
var y = canvas.height / 3;
var radius = 30;
var startAngle = 0.8 * Math.PI;
var endAngle = 1.2 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//SEVENTH ARC TOP SCOOP
var x = canvas.width / 1.45;
var y = canvas.height / 3;
var radius = 31;
var startAngle = 0.9 * Math.PI;
var endAngle = 1 * Math.PI;
var counterClockwise = true;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = false;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//TOP SCOOP
var x = canvas.width / 2;
var y = canvas.height / 3.6;
var radius = 150;
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(250, 135, 203)';
context.stroke();
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate
// radius of the tracing circle
var radius = 100;
// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
// draw the arc clockwise or counterclockwise
var counterClockwise = true;
context.fillStyle = 'rgb(250, 135, 203)';
context.fill();
//CHERRY STEM
var startX = 420;
var startY = 120;
// control point coordinates ( magnet )
var cpointX = canvas.width / 1.5;
var cpointY = canvas.height /6 ;
// ending point coordinates
var endX = 490;
var endY = 60;
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//CHERRY
var centerX = canvas.width / 1.7;
var centerY = canvas.height / 6.4;
var radius = 40;
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(244, 116, 112)");
grd.addColorStop(1, "rgb(246, 43, 37)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(246, 43, 37)";
context.stroke();
//TOP CHERRY STEM
var centerX = canvas.width / 1.43;
var centerY = canvas.height / 16;
var radius = 1;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//CHERRY SHADOW
var centerX = canvas.width / 1.59;
var centerY = canvas.height / 7.28;
var radius = 5;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(171, 25, 20)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(208, 37, 31)";
context.stroke();
//GREEN SPRINKLE 1 TOP
var x= 250;
var y = 200;
var x1 = 260;
var y1 = 210
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(171, 248, 53)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//GREEN SPRINKLE 2 TOP
var x= 460;
var y = 250;
var x1 = 450;
var y1 = 260
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(171, 248, 53)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//GREEN SPRINKLE 3 TOP
var x= 360;
var y =300;
var x1 = 370;
var y1 = 305
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(171, 248, 53)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//BLUE SPRINKLE 1 TOP
var x= 310;
var y =230;
var x1 = 300;
var y1 = 240
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(53, 248, 240)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//BLUE SPRINKLE 2 TOP
var x= 450;
var y =200;
var x1 = 460;
var y1 = 210
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(53, 248, 240)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//BLUE SPRINKLE 3 TOP
var x= 200;
var y =315;
var x1 = 190;
var y1 = 325
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(53, 248, 240)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//PINK SPRINKLE 1 TOP
var x= 240;
var y =270;
var x1 = 250;
var y1 = 280
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 2, 147)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//PINK SPRINKLE 2 TOP
var x= 400;
var y =230;
var x1 = 410;
var y1 = 240
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 2, 147)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//PINK SPRINKLE 3 TOP
var x= 300;
var y =160;
var x1 = 310;
var y1 = 150
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 2, 147)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//YELLOW SPRINKLE 1 TOP
var x= 350;
var y =180;
var x1 = 340;
var y1 = 170
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 241, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//YELLOW SPRINKLE 2 TOP
var x= 300;
var y =320;
var x1 = 290;
var y1 = 310
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 241, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//YELLOW SPRINKLE 3 TOP
var x= 450;
var y =320;
var x1 = 460;
var y1 = 310
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 241, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//DARK BLUE SPRINKLE 1 TOP
var x= 350;
var y =260;
var x1 = 360;
var y1 = 250
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(2, 108, 255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//DARK BLUE SPRINKLE 2 TOP
var x= 230;
var y =230;
var x1 = 220;
var y1 = 240
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(2, 108, 255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//DARK BLUE SPRINKLE 3 TOP
var x= 500;
var y =330;
var x1 = 490;
var y1 = 320
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(2, 108, 255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//WHITE SPRINKLE 1 TOP
var x= 410;
var y =270;
var x1 = 420;
var y1 = 280
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 255, 255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//WHITE SPRINKLE 2 TOP
var x= 300;
var y = 190;
var x1 = 310;
var y1 = 200
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 255, 255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//WHITE SPRINKLE 3 TOP
var x= 260;
var y =310;
var x1 = 250;
var y1 = 320
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(255, 255, 255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//RED SPRINKLE 1 TOP
var x= 410;
var y =320;
var x1 = 400;
var y1 = 330
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(254, 33, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//RED SPRINKLE 2 TOP
var x= 300;
var y =275;
var x1 = 310;
var y1 = 285
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(254, 33, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//RED SPRINKLE 3 TOP
var x= 360;
var y =220;
var x1 = 370;
var y1 = 210
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(254, 33, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//PURPLE SPRINKLE 1 TOP
var x= 340;
var y =330;
var x1 = 350;
var y1 = 340
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(142, 68, 173)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//PURPLE SPRINKLE 2 TOP
var x= 350;
var y =140;
var x1 = 360;
var y1 = 150
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(142, 68, 173)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//PURPLE SPRINKLE 3 TOP
var x= 470;
var y =270;
var x1 = 480;
var y1 = 280
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(142, 68, 173)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//ORANGE SPRINKLE 1 TOP
var x= 220;
var y =330;
var x1 = 230;
var y1 = 340
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(254, 138, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//ORANGE SPRINKLE 2 TOP
var x= 270;
var y =240;
var x1 = 280;
var y1 = 250
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(254, 138, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//ORANGE SPRINKLE 3 TOP
var x= 450;
var y =230;
var x1 = 440;
var y1 = 240
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(254, 138, 2)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//TURQUOISE SPRINKLE 1 TOP
var x= 260;
var y =180;
var x1 = 270;
var y1 = 170
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(2, 254, 174)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//TURQUOISE SPRINKLE 2 TOP
var x= 380;
var y =270;
var x1 = 390;
var y1 = 280
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(2, 254, 174)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//TURQUOISE SPRINKLE 3 TOP
var x= 290;
var y =350;
var x1 = 300;
var y1 = 340
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1); // move to starting coordinates
context.lineCap = 'round';
context.lineWidth = 5;// declare the width in pixels of the line
context.strokeStyle = 'rgb(2, 254, 174)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(250, 400);
context.lineTo(250, 410);
context.lineTo(260, 410);
context.lineTo(250, 400);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(300, 420);
context.lineTo(310, 420);
context.lineTo(310, 430);
context.lineTo(300, 420);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(450, 400);
context.lineTo(460, 400);
context.lineTo(460, 410);
context.lineTo(450, 400);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(360, 450);
context.lineTo(370, 450);
context.lineTo(370, 440);
context.lineTo(360, 450);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(450, 470);
context.lineTo(460, 470);
context.lineTo(460, 460);
context.lineTo(450, 470);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(230, 470);
context.lineTo(240, 480);
context.lineTo(230, 480);
context.lineTo(230, 470);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(400, 370);
context.lineTo(400, 380);
context.lineTo(410, 380);
context.lineTo(400, 370);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(270, 490);
context.lineTo(280, 500);
context.lineTo(270, 500);
context.lineTo(270, 490);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(340, 500);
context.lineTo(330, 510);
context.lineTo(340, 510);
context.lineTo(340, 500);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(320, 390);
context.lineTo(330, 390);
context.lineTo(325, 400);
context.lineTo(320, 390);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(410, 430);
context.lineTo(420, 430);
context.lineTo(415, 440);
context.lineTo(410, 430);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(210, 380);
context.lineTo(220, 380);
context.lineTo(215, 390);
context.lineTo(210, 380);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(410, 490);
context.lineTo(420, 490);
context.lineTo(415, 480);
context.lineTo(410, 490);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(310, 470);
context.lineTo(320, 470);
context.lineTo(315, 460);
context.lineTo(310, 470);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(190, 500);
context.lineTo(200, 500);
context.lineTo(195, 490);
context.lineTo(190, 500);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(380, 400);
context.lineTo(390, 400);
context.lineTo(385, 410);
context.lineTo(380, 400);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(275, 450);
context.lineTo(285, 450);
context.lineTo(280, 460);
context.lineTo(275, 450);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(225, 430);
context.lineTo(235, 430);
context.lineTo(230, 440);
context.lineTo(225, 430);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(280, 375);
context.lineTo(280, 385);
context.lineTo(290, 385);
context.lineTo(280, 375);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(350, 420);
context.lineTo(340, 420);
context.lineTo(340, 430);
context.lineTo(350, 420);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(370, 480);
context.lineTo(360, 480);
context.lineTo(360, 490);
context.lineTo(370, 480);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(485, 490);
context.lineTo(495, 490);
context.lineTo(485, 500);
context.lineTo(485, 490);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(485, 377);
context.lineTo(490, 387);
context.lineTo(480, 387);
context.lineTo(485, 377);
context.fill ();
context.stroke();
context.closePath();
//MINT CHIP
context.fillStyle = 'rgb(50, 30, 11)';
context.strokeStyle = 'rgb(50, 30, 11)';
context.lineWidth = 2;
context.beginPath();
context.moveTo(480, 420);
context.lineTo(490, 420);
context.lineTo(490, 430);
context.lineTo(480, 420);
context.fill ();
context.stroke();
context.closePath();
//NAME
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "15px courier";
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillText("Maggie Bunting- Spring 2019", 440, 980);
//HEART
var Ax = 600;
var Ay = 880;
var Bx = 600;
var By = 950;
var control1x = 600;
var control1y = 800;
var control2x = 455;
var control2y = 755;
var control3x = 745;
var control3y = 800;
var control4x = 650;
var control4y = 750;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 8;
// line color
context.strokeStyle = 'rgb(110, 229, 202)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgba(255, 255, 255, .5)';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="1000"></canvas>
</body>
</html>
Comments
Post a Comment