Tuesday, September 10, 2013

Canvas Project

Harrison Covington, 2013, Art 210 Echeverry 
 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
context.beginPath();
context.rect(0,0,800,600);
context.closePath()
//LINEAR GRADIENT
var grd = context.createLinearGradient(900,0,0,0);
grd.addColorStop(0.1,"rgb(255,255,255)"); //STARTING COLOR
grd.addColorStop(0.12,"rgb(0,0,130)");
grd.addColorStop(0.13,"rgb(255,255,255)");
grd.addColorStop(0.14,"rgb(0,0,130)");
grd.addColorStop(0.15,"rgb(255,255,255)");
grd.addColorStop(0.16,"rgb(0,0,130)");
grd.addColorStop(0.17,"rgb(255,255,255)");
grd.addColorStop(0.18,"rgb(0,0,130)");
grd.addColorStop(0.19,"rgb(255,255,255)");
grd.addColorStop(0.2,"rgb(0,0,130)");
grd.addColorStop(0.21,"rgb(255,255,255)");
grd.addColorStop(0.22,"rgb(0,0,130)");
grd.addColorStop(0.23,"rgb(255,255,255)");
grd.addColorStop(0.24,"rgb(0,0,130)");
grd.addColorStop(0.25,"rgb(255,255,255)");
grd.addColorStop(0.26,"rgb(0,0,130)");
grd.addColorStop(0.27,"rgb(255,255,255)");
grd.addColorStop(0.28,"rgb(0,0,130)");
grd.addColorStop(0.29,"rgb(255,255,255)");
grd.addColorStop(0.30,"rgb(0,0,130)");
grd.addColorStop(0.31,"rgb(255,255,255)");
grd.addColorStop(0.32,"rgb(0,0,130)");
grd.addColorStop(0.33,"rgb(255,255,255)");
grd.addColorStop(0.34,"rgb(0,0,130)");
grd.addColorStop(0.35,"rgb(255,255,255)");
grd.addColorStop(0.36,"rgb(0,0,130)");
grd.addColorStop(0.37,"rgb(255,255,255)");
grd.addColorStop(0.38,"rgb(0,0,130)");
grd.addColorStop(0.39,"rgb(255,255,255)");
grd.addColorStop(0.40,"rgb(0,0,130)");
grd.addColorStop(0.41,"rgb(255,255,255)");
grd.addColorStop(0.42,"rgb(0,0,130)");
grd.addColorStop(0.43,"rgb(255,255,255)");
grd.addColorStop(0.44,"rgb(0,0,130)");
grd.addColorStop(0.45,"rgb(255,255,255)");
grd.addColorStop(0.46,"rgb(0,0,130)");
grd.addColorStop(0.47,"rgb(255,255,255)");
grd.addColorStop(0.48,"rgb(0,0,130)");
grd.addColorStop(0.49,"rgb(255,255,255)");
grd.addColorStop(0.5,"rgb(0,0,130)");
grd.addColorStop(0.51,"rgb(255,255,255)");
grd.addColorStop(0.52,"rgb(0,0,130)");
grd.addColorStop(0.53,"rgb(255,255,255)");
grd.addColorStop(0.54,"rgb(0,0,130)");
grd.addColorStop(0.55,"rgb(255,255,255)");
grd.addColorStop(0.56,"rgb(0,0,130)");
grd.addColorStop(0.57,"rgb(255,255,255)");
grd.addColorStop(0.58,"rgb(0,0,130)");
grd.addColorStop(0.59,"rgb(255,255,255)");
grd.addColorStop(0.6,"rgb(0,0,130)");
grd.addColorStop(0.61,"rgb(255,255,255)");
grd.addColorStop(0.62,"rgb(0,0,130)");
grd.addColorStop(0.63,"rgb(255,255,255)");
grd.addColorStop(0.64,"rgb(0,0,130)");
grd.addColorStop(0.65,"rgb(255,255,255)");
grd.addColorStop(0.66,"rgb(0,0,130)");
grd.addColorStop(0.67,"rgb(255,255,255)");
grd.addColorStop(0.68,"rgb(0,0,130)");
grd.addColorStop(0.69,"rgb(255,255,255)");
grd.addColorStop(0.70,"rgb(0,0,130)");
grd.addColorStop(0.71,"rgb(255,255,255)");
grd.addColorStop(0.72,"rgb(0,0,130)");
grd.addColorStop(0.73,"rgb(255,255,255)");
grd.addColorStop(0.74,"rgb(0,0,130)");
grd.addColorStop(0.75,"rgb(255,255,255)");
grd.addColorStop(0.76,"rgb(0,0,130)");
grd.addColorStop(0.77,"rgb(255,255,255)");
grd.addColorStop(0.78,"rgb(0,0,130)");
grd.addColorStop(0.79,"rgb(255,255,255)");
grd.addColorStop(0.8,"rgb(0,0,130)");
grd.addColorStop(0.81,"rgb(255,255,255)");
grd.addColorStop(0.82,"rgb(0,0,130)");
grd.addColorStop(0.83,"rgb(255,255,255)");
grd.addColorStop(0.84,"rgb(0,0,130)");
grd.addColorStop(0.85,"rgb(255,255,255)");
grd.addColorStop(0.86,"rgb(0,0,130)");
grd.addColorStop(0.87,"rgb(255,255,255)");
grd.addColorStop(0.88,"rgb(0,0,130)");
grd.addColorStop(0.89,"rgb(255,255,255)");
grd.addColorStop(0.9,"rgb(0,0,130)");
grd.addColorStop(0.91,"rgb(255,255,255)");
grd.addColorStop(0.92,"rgb(0,0,130)");
grd.addColorStop(0.93,"rgb(255,255,255)");
grd.addColorStop(0.94,"rgb(0,0,130)");
grd.addColorStop(0.95,"rgb(255,255,255)");
grd.addColorStop(0.96,"rgb(0,0,130)");
grd.addColorStop(0.97,"rgb(255,255,255)");
grd.addColorStop(0.98,"rgb(0,0,130)");
grd.addColorStop(0.99,"rgb(255,255,255)");
grd.addColorStop(1,"rgb(0,0,130)"); //END COLOR
context.fillStyle = grd;
context.fill();
//CIRCLE 1
context.beginPath();
context.arc(400,300,300,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(300,-110,300,800);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();
//CIRCLE 2
context.beginPath();
context.arc(400,300,280,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(300,-110,300,800);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();
//CIRCLE 3
context.beginPath();
context.arc(400,300,250,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(300,-110,300,800);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();
//CIRCLE 4
context.beginPath();
context.arc(400,300,200,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(115,300,700,300);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();
//CIRCLE 4
context.beginPath();
context.arc(400,300,150,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(300,-110,300,800);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();
//CIRCLE 6
context.beginPath();
context.arc(400,300,125,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(0,-100,0,800);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)