Project 1 - Mike Wazowski
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context.fillStyle = grd;
context.fill();
/////////// Clock
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(85, 100, 60, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(100, 100, 100, 100, 200, 450);
grd.addColorStop(0, "gray");
grd.addColorStop(0.3, "white");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(85, 100, 50, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(100, 100, 100, 100, 200, 450);
grd.addColorStop(0, "white");
grd.addColorStop(0.3, "white");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(85, 100, 2, 30); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(85, 100);
context.lineTo(85, 100);
context.lineTo(60, 120);
context.strokeStyle = "black";
context.lineWidth = 7;
context.stroke();
///// Floor
context.beginPath();
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "gray");
grd.addColorStop(0.3, "#0ca4df");
grd.addColorStop(0.5, "gray");
grd.addColorStop(1, "#0ca4df");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(480, 562, 600, 45); // x,y,width, height
context.fillStyle = '#ecc609';
context.fill();
context.strokeStyle = "#ecc609";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(725, 512, 200, 235); // x,y,width, height
context.fillStyle = '#ecc609';
context.fill();
context.strokeStyle = "#ecc609";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(740, 512, 165, 205); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#3b3a37");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "#3b3a37");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(740, 512, 165, 105); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 2;
context.closePath();
context.stroke();
///////// Door
context.beginPath();
context.rect(720, 80, 220, 480); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#3b3a37");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "#3b3a37");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 82, 40, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 3;
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#3b3a37");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "#3b3a37");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 75, 20, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 75, 12, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#f54b4b";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 75, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#f85353";
context.fill();
context.beginPath();
context.rect(740, 105, 200, 455); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "white");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "gray");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(760, 140, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(890, 140, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(760, 360, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(890, 360, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
/////////////////// Door Holder
context.beginPath();
context.moveTo(720, 560);
context.lineTo(720, 280);
context.lineTo(700, 280);
context.lineTo(680, 450);
context.lineTo(520, 560);
context.lineTo(720, 560);
context.strokeStyle = "gray";
context.lineWidth = 3
context.fillStyle = 'gray';
context.fill();
context.closePath();
context.stroke();
context.beginPath();
context.rect(718, 282, 1, 275); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.closePath();
context.stroke();
///// Right Horn
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(260, 70, 50, 1.4*Math.PI, .5*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "#d3c598");
grd.addColorStop(0.3, "#d3c598");
grd.addColorStop(0.5, "#4c502f");
grd.addColorStop(1, "#d3c598");
context.fillStyle = grd;
context.fill();
//context.strokeStyle = "#d3c598";
//context.closePath();
/////// Left Horn
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(460, 70, 50, 2.4*Math.PI, 1.5*Math.PI, true);
context.lineWidth = 10;
grd = context.createRadialGradient(460, 70, 380, 460, 70, 80);
grd.addColorStop(0, "#d3c598");
grd.addColorStop(0.3, "#d3c598");
grd.addColorStop(0.5, "#4c502f");
grd.addColorStop(1, "#d3c598");
context.fillStyle = grd;
context.fill();
// HEAD
context.beginPath();
context.moveTo(70,400); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 800, 650, 400 ); // controlX, controlY, endX, endY
context.lineTo(180, 100);
context.moveTo(180,100); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 20, 550, 100 ); // controlX, controlY, endX, endY
context.lineTo(650, 400);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
//context.strokeStyle = "#b3ed4d";
//context.lineWidth = 10;
//context.fillStyle = "#b3ed4d";
////////// Eye Lid
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 220, 135, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "#87c779";
context.fill();
////////// Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 240, 130, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(100, 100, 100, 100, 200, 450);
grd.addColorStop(0, "white");
grd.addColorStop(0.3, "white");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 240, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
grd = context.createRadialGradient(400, 300, 140, 400, 300, 20);
grd.addColorStop(0, "#2db07e");
grd.addColorStop(0.3, "#2db07e");
grd.addColorStop(0.5, "#1e9263");
grd.addColorStop(1, "#1e9263");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 240, 20, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
////////// Mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 500, 80, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 500, 25, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(310, 500, 25, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 500, 25, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
////////////////// Helmet
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 75, 70, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "#0ca4df";
//context.closePath();
context.stroke();
context.fillStyle = "#0ca4df";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(359, 40, 25, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "#0ca4df";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.rect(280, 70, 160, 15); // x,y,width, height
context.fillStyle = "#0ca4df";
context.fill();
context.strokeStyle = "#0470a7";
context.lineWidth = 5;
context.closePath();
context.stroke();
/////////////// Helmet M
context.beginPath();
context.moveTo(345, 30);
context.lineTo(345, 50);
context.lineTo(352, 50);
context.lineTo(354, 44);
context.lineTo(356, 50);
context.lineTo(362, 50);
context.lineTo(364, 44);
context.lineTo(366, 50);
context.lineTo(373, 50);
context.lineTo(373, 30);
context.lineTo(363, 30);
context.lineTo(360, 35);
context.lineTo(357, 30);
context.lineTo(345, 30);
context.lineWidth = 2
context.strokeStyle = "#0ca4df";
context.fillStyle = "#0ca4df";
context.fill();
//context.closePath();
context.stroke();
//////// Helmet Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 41, 4, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "white";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 41, .8, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 1;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////// Left Arm
context.beginPath();
context.moveTo(610, 370);
context.lineTo(650, 480);
context.lineTo(620, 650);
context.lineTo(645, 650);
context.lineTo(666, 480);
context.lineTo(640, 370);
context.lineTo(620, 370);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.closePath();
/////////// Right Arm
context.beginPath();
context.moveTo(71, 392);
context.lineTo(92, 480);
context.lineTo(150, 650);
context.lineTo(175, 650);
context.lineTo(110, 480);
context.lineTo(97, 392);
context.lineTo(71, 392);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////// Clipboard
context.beginPath();
context.rect(525, 620, 100, 125); // x,y,width, height
context.fillStyle = '#97954d';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(550, 610, 50, 20); // x,y,width, height
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 2;
context.closePath();
context.stroke();
/////////// Left Hand
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(625, 650, 20, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
///////// Fingers
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(605, 650, 8, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(595, 650, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "tank";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(612, 668, 8, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(609, 675, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "tank";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(630, 670, 6, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(631, 677, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "tank";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
/////// Pencil
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(180, 617, 4, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 1;
context.strokeStyle = "pink";
//context.closePath();
context.stroke();
context.fillStyle = "pink";
context.fill();
context.beginPath();
context.moveTo(179, 620);
context.lineTo(160, 680);
context.lineWidth = 10
context.strokeStyle = "yellow";
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(157, 679);
context.lineTo(156, 690);
context.lineTo(165, 680);
context.lineWidth = 1
context.strokeStyle = "tan";
context.fillStyle = "tan";
context.fill();
context.closePath();
context.stroke();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(156, 690, .7, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 1;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
////////////// Right Hand
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(170, 650, 20, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
//////// Left Leg
context.beginPath();
context.moveTo(450, 550);
context.lineTo(475, 650);
context.lineTo(465, 790);
context.lineTo(490, 820);
context.lineTo(410, 820);
context.lineTo(435, 790);
context.lineTo(455, 650);
context.lineTo(430, 550);
context.lineTo(450, 550);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(420, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(420, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(450, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(450, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(480, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(480, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
//////// Right Leg
context.beginPath();
context.moveTo(270, 550);
context.lineTo(295, 650);
context.lineTo(285, 790);
context.lineTo(310, 820);
context.lineTo(230, 820);
context.lineTo(255, 790);
context.lineTo(275, 650);
context.lineTo(250, 550);
context.lineTo(270, 550);
context.lineWidth = 10;
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(240, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(240, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
//////// Scream Tube
context.beginPath();
context.rect(30, 650, 75, 205); // x,y,width, height
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "yellow");
grd.addColorStop(0.3, "#ecc609");
grd.addColorStop(0.5, "yellow");
grd.addColorStop(1, "#ecc609");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(35, 680, 65, 5); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 3;
context.closePath();
context.stroke();
context.beginPath();
context.rect(35, 820, 65, 5); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 3;
context.closePath();
context.stroke();
context.beginPath();
context.rect(60, 715, 15, 75); // x,y,width, height
context.fillStyle = 'gray';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 5;
context.closePath();
context.stroke();
context.beginPath();
context.rect(66, 723, 2, 60); // x,y,width, height
context.fillStyle = 'red';
context.fill();
context.strokeStyle = "red";
context.lineWidth = 5;
context.closePath();
context.stroke();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context.fillStyle = grd;
context.fill();
/////////// Clock
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(85, 100, 60, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(100, 100, 100, 100, 200, 450);
grd.addColorStop(0, "gray");
grd.addColorStop(0.3, "white");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(85, 100, 50, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(100, 100, 100, 100, 200, 450);
grd.addColorStop(0, "white");
grd.addColorStop(0.3, "white");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(85, 100, 2, 30); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(85, 100);
context.lineTo(85, 100);
context.lineTo(60, 120);
context.strokeStyle = "black";
context.lineWidth = 7;
context.stroke();
///// Floor
context.beginPath();
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "gray");
grd.addColorStop(0.3, "#0ca4df");
grd.addColorStop(0.5, "gray");
grd.addColorStop(1, "#0ca4df");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(480, 562, 600, 45); // x,y,width, height
context.fillStyle = '#ecc609';
context.fill();
context.strokeStyle = "#ecc609";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(725, 512, 200, 235); // x,y,width, height
context.fillStyle = '#ecc609';
context.fill();
context.strokeStyle = "#ecc609";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(740, 512, 165, 205); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#3b3a37");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "#3b3a37");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(740, 512, 165, 105); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 2;
context.closePath();
context.stroke();
///////// Door
context.beginPath();
context.rect(720, 80, 220, 480); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#3b3a37");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "#3b3a37");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 82, 40, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 3;
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#3b3a37");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "#3b3a37");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 75, 20, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 75, 12, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#f54b4b";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(855, 75, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#f85353";
context.fill();
context.beginPath();
context.rect(740, 105, 200, 455); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "white");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "gray");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(760, 140, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(890, 140, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(760, 360, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(890, 360, 70, 165); // x,y,width, height
context.fillStyle = 'white';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 2;
context.closePath();
context.stroke();
/////////////////// Door Holder
context.beginPath();
context.moveTo(720, 560);
context.lineTo(720, 280);
context.lineTo(700, 280);
context.lineTo(680, 450);
context.lineTo(520, 560);
context.lineTo(720, 560);
context.strokeStyle = "gray";
context.lineWidth = 3
context.fillStyle = 'gray';
context.fill();
context.closePath();
context.stroke();
context.beginPath();
context.rect(718, 282, 1, 275); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 5;
context.closePath();
context.stroke();
///// Right Horn
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(260, 70, 50, 1.4*Math.PI, .5*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "#d3c598");
grd.addColorStop(0.3, "#d3c598");
grd.addColorStop(0.5, "#4c502f");
grd.addColorStop(1, "#d3c598");
context.fillStyle = grd;
context.fill();
//context.strokeStyle = "#d3c598";
//context.closePath();
/////// Left Horn
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(460, 70, 50, 2.4*Math.PI, 1.5*Math.PI, true);
context.lineWidth = 10;
grd = context.createRadialGradient(460, 70, 380, 460, 70, 80);
grd.addColorStop(0, "#d3c598");
grd.addColorStop(0.3, "#d3c598");
grd.addColorStop(0.5, "#4c502f");
grd.addColorStop(1, "#d3c598");
context.fillStyle = grd;
context.fill();
// HEAD
context.beginPath();
context.moveTo(70,400); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 800, 650, 400 ); // controlX, controlY, endX, endY
context.lineTo(180, 100);
context.moveTo(180,100); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 20, 550, 100 ); // controlX, controlY, endX, endY
context.lineTo(650, 400);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
//context.strokeStyle = "#b3ed4d";
//context.lineWidth = 10;
//context.fillStyle = "#b3ed4d";
////////// Eye Lid
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 220, 135, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "#87c779";
context.fill();
////////// Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 240, 130, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(100, 100, 100, 100, 200, 450);
grd.addColorStop(0, "white");
grd.addColorStop(0.3, "white");
grd.addColorStop(0.5, "white");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 240, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
grd = context.createRadialGradient(400, 300, 140, 400, 300, 20);
grd.addColorStop(0, "#2db07e");
grd.addColorStop(0.3, "#2db07e");
grd.addColorStop(0.5, "#1e9263");
grd.addColorStop(1, "#1e9263");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 240, 20, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
////////// Mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 500, 80, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 500, 25, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(310, 500, 25, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 500, 25, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
////////////////// Helmet
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 75, 70, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "#0ca4df";
//context.closePath();
context.stroke();
context.fillStyle = "#0ca4df";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(359, 40, 25, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "#0ca4df";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.rect(280, 70, 160, 15); // x,y,width, height
context.fillStyle = "#0ca4df";
context.fill();
context.strokeStyle = "#0470a7";
context.lineWidth = 5;
context.closePath();
context.stroke();
/////////////// Helmet M
context.beginPath();
context.moveTo(345, 30);
context.lineTo(345, 50);
context.lineTo(352, 50);
context.lineTo(354, 44);
context.lineTo(356, 50);
context.lineTo(362, 50);
context.lineTo(364, 44);
context.lineTo(366, 50);
context.lineTo(373, 50);
context.lineTo(373, 30);
context.lineTo(363, 30);
context.lineTo(360, 35);
context.lineTo(357, 30);
context.lineTo(345, 30);
context.lineWidth = 2
context.strokeStyle = "#0ca4df";
context.fillStyle = "#0ca4df";
context.fill();
//context.closePath();
context.stroke();
//////// Helmet Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 41, 4, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "white";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 41, .8, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 1;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////// Left Arm
context.beginPath();
context.moveTo(610, 370);
context.lineTo(650, 480);
context.lineTo(620, 650);
context.lineTo(645, 650);
context.lineTo(666, 480);
context.lineTo(640, 370);
context.lineTo(620, 370);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.closePath();
/////////// Right Arm
context.beginPath();
context.moveTo(71, 392);
context.lineTo(92, 480);
context.lineTo(150, 650);
context.lineTo(175, 650);
context.lineTo(110, 480);
context.lineTo(97, 392);
context.lineTo(71, 392);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////// Clipboard
context.beginPath();
context.rect(525, 620, 100, 125); // x,y,width, height
context.fillStyle = '#97954d';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 2;
context.closePath();
context.stroke();
context.beginPath();
context.rect(550, 610, 50, 20); // x,y,width, height
context.fillStyle = 'silver';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 2;
context.closePath();
context.stroke();
/////////// Left Hand
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(625, 650, 20, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
///////// Fingers
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(605, 650, 8, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(595, 650, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "tank";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(612, 668, 8, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(609, 675, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "tank";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(630, 670, 6, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(631, 677, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "tank";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
/////// Pencil
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(180, 617, 4, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 1;
context.strokeStyle = "pink";
//context.closePath();
context.stroke();
context.fillStyle = "pink";
context.fill();
context.beginPath();
context.moveTo(179, 620);
context.lineTo(160, 680);
context.lineWidth = 10
context.strokeStyle = "yellow";
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(157, 679);
context.lineTo(156, 690);
context.lineTo(165, 680);
context.lineWidth = 1
context.strokeStyle = "tan";
context.fillStyle = "tan";
context.fill();
context.closePath();
context.stroke();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(156, 690, .7, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 1;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
////////////// Right Hand
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(170, 650, 20, 2*Math.PI, 0*Math.PI, true);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
//////// Left Leg
context.beginPath();
context.moveTo(450, 550);
context.lineTo(475, 650);
context.lineTo(465, 790);
context.lineTo(490, 820);
context.lineTo(410, 820);
context.lineTo(435, 790);
context.lineTo(455, 650);
context.lineTo(430, 550);
context.lineTo(450, 550);
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(420, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(420, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(450, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(450, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(480, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(480, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
//////// Right Leg
context.beginPath();
context.moveTo(270, 550);
context.lineTo(295, 650);
context.lineTo(285, 790);
context.lineTo(310, 820);
context.lineTo(230, 820);
context.lineTo(255, 790);
context.lineTo(275, 650);
context.lineTo(250, 550);
context.lineTo(270, 550);
context.lineWidth = 10;
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "green");
grd.addColorStop(0.3, "#1a4d0b");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "#87c779");
context.fillStyle = grd;
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(240, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(240, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 810, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "green";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 815, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.stroke();
context.fillStyle = "tan";
context.fill();
//////// Scream Tube
context.beginPath();
context.rect(30, 650, 75, 205); // x,y,width, height
grd = context.createRadialGradient(300, 300, 600, 500, 100, 250);
grd.addColorStop(0, "yellow");
grd.addColorStop(0.3, "#ecc609");
grd.addColorStop(0.5, "yellow");
grd.addColorStop(1, "#ecc609");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.rect(35, 680, 65, 5); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 3;
context.closePath();
context.stroke();
context.beginPath();
context.rect(35, 820, 65, 5); // x,y,width, height
context.fillStyle = 'black';
context.fill();
context.strokeStyle = "black";
context.lineWidth = 3;
context.closePath();
context.stroke();
context.beginPath();
context.rect(60, 715, 15, 75); // x,y,width, height
context.fillStyle = 'gray';
context.fill();
context.strokeStyle = "gray";
context.lineWidth = 5;
context.closePath();
context.stroke();
context.beginPath();
context.rect(66, 723, 2, 60); // x,y,width, height
context.fillStyle = 'red';
context.fill();
context.strokeStyle = "red";
context.lineWidth = 5;
context.closePath();
context.stroke();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="900" height="900"></canvas>
</body>
</html>
Mandalas
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
//////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "black");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "black");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
{
for (var i=0; i<100; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
}
{
var inc = 8;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i*6); // increment is 20
context.lineTo(0,0);
context.fillStyle = "rgba(0,155,255,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = "rgba(200,0,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i/2, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = "rgba(160,75,84,55,.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/1, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width, 0);
context.fillStyle = "rgba(100,55,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context.lineWidth = .75;
}
///////
var inc = 1;
for (var i=0; i < canvas1.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas1.width-i, 0);
context1.lineTo(0, i*12); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(255,255,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI / i);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
//////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "black");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "black");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
{
for (var i=0; i<100; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*100;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
}
{
var inc = 8;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i*6); // increment is 20
context.lineTo(0,0);
context.fillStyle = "rgba(0,155,255,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = "rgba(200,0,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i/2, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = "rgba(160,75,84,55,.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/1, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width, 0);
context.fillStyle = "rgba(100,55,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context.lineWidth = .75;
}
///////
var inc = 1;
for (var i=0; i < canvas1.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas1.width-i, 0);
context1.lineTo(0, i*12); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(255,255,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI / i);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "black");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "black");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
///////////
var image1 = new Image();
image1.src = "mandalas images/Green-Goblin.png";
var image2 = new Image();
image1.src = "mandalas images/Green-Goblin.png";
var image3 = new Image();
image3.src = "mandalas images/Green-Goblin.png";
var image4 = new Image();
image4.src = "mandalas images/Batman_Logo.png";
////////////////////////////////////// start here
image1.onload = function() {
for (var i=0; i<100; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/100);
context.drawImage(image1, 50, 50);
context.restore();
}
}
image2.onload = function() {
for (var i=0; i<75; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/75);
context.drawImage(image2, 50, 50);
context.restore();
}
}
image3.onload = function() {
for (var i=0; i<50; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image3, 100, 100);
context.restore();
}
}
image4.onload = function() {
for (var i=0; i<25; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/25);
context.drawImage(image4, 150, 150);
context.restore();
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
/////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "black");
grd.addColorStop(0.3, "gray");
grd.addColorStop(0.5, "black");
grd.addColorStop(1, "gray");
context.fillStyle = grd;
context.fill();
///////////
var image1 = new Image();
image1.src = "mandalas images/Green-Goblin.png";
var image2 = new Image();
image1.src = "mandalas images/Green-Goblin.png";
var image3 = new Image();
image3.src = "mandalas images/Green-Goblin.png";
var image4 = new Image();
image4.src = "mandalas images/Batman_Logo.png";
////////////////////////////////////// start here
image1.onload = function() {
for (var i=0; i<100; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/100);
context.drawImage(image1, 50, 50);
context.restore();
}
}
image2.onload = function() {
for (var i=0; i<75; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/75);
context.drawImage(image2, 50, 50);
context.restore();
}
}
image3.onload = function() {
for (var i=0; i<50; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image3, 100, 100);
context.restore();
}
}
image4.onload = function() {
for (var i=0; i<25; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/25);
context.drawImage(image4, 150, 150);
context.restore();
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context.fillStyle = grd;
context.fill();
var image1 = new Image();
image1.src = "mandalas images/johnny_bravo.png";
var image2 = new Image();
image1.src = "mandalas images/johnny_bravo.png";
var image3 = new Image();
image3.src = "mandalas images/johnny_bravo.png";
var image4 = new Image();
image4.src = "mandalas images/johnny_bravo.png";
////////////////////////////////////// start here
image1.onload = function() {
for (var i=0; i<100; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/100);
context.drawImage(image1, 50, 80);
context.restore();
}
}
image2.onload = function() {
for (var i=0; i<75; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/75);
context.drawImage(image2, 50, 50);
context.restore();
}
}
image3.onload = function() {
for (var i=0; i<50; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image3, 100, 100);
context.restore();
}
}
image4.onload = function() {
for (var i=0; i<25; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/25);
context.drawImage(image4, 150, 150);
context.restore();
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context.fillStyle = grd;
context.fill();
var image1 = new Image();
image1.src = "mandalas images/johnny_bravo.png";
var image2 = new Image();
image1.src = "mandalas images/johnny_bravo.png";
var image3 = new Image();
image3.src = "mandalas images/johnny_bravo.png";
var image4 = new Image();
image4.src = "mandalas images/johnny_bravo.png";
////////////////////////////////////// start here
image1.onload = function() {
for (var i=0; i<100; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/100);
context.drawImage(image1, 50, 80);
context.restore();
}
}
image2.onload = function() {
for (var i=0; i<75; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/75);
context.drawImage(image2, 50, 50);
context.restore();
}
}
image3.onload = function() {
for (var i=0; i<50; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image3, 100, 100);
context.restore();
}
}
image4.onload = function() {
for (var i=0; i<25; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/25);
context.drawImage(image4, 150, 150);
context.restore();
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "purple");
grd.addColorStop(0.3, "pink");
grd.addColorStop(0.5, "purple");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
//////////
var image1 = new Image();
image1.src = "mandalas images/courage.png";
var image2 = new Image();
image1.src = "mandalas images/courage.png";
var image3 = new Image();
image3.src = "mandalas images/courage.png";
var image4 = new Image();
image4.src = "mandalas images/courage.png";
////////////////////////////////////// start here
image1.onload = function() {
for (var i=0; i<100; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image1, 10, 50);
context.restore();
}
}
image2.onload = function() {
for (var i=0; i<75; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/75);
context.drawImage(image2, 50, 50);
context.restore();
}
}
image3.onload = function() {
for (var i=0; i<50; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image3, 100, 100);
context.restore();
}
}
image4.onload = function() {
for (var i=0; i<25; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/25);
context.drawImage(image4, 150, 150);
context.restore();
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "purple");
grd.addColorStop(0.3, "pink");
grd.addColorStop(0.5, "purple");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
//////////
var image1 = new Image();
image1.src = "mandalas images/courage.png";
var image2 = new Image();
image1.src = "mandalas images/courage.png";
var image3 = new Image();
image3.src = "mandalas images/courage.png";
var image4 = new Image();
image4.src = "mandalas images/courage.png";
////////////////////////////////////// start here
image1.onload = function() {
for (var i=0; i<100; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image1, 10, 50);
context.restore();
}
}
image2.onload = function() {
for (var i=0; i<75; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/75);
context.drawImage(image2, 50, 50);
context.restore();
}
}
image3.onload = function() {
for (var i=0; i<50; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/50);
context.drawImage(image3, 100, 100);
context.restore();
}
}
image4.onload = function() {
for (var i=0; i<25; i++) {
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(Math.PI*2*i/25);
context.drawImage(image4, 150, 150);
context.restore();
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "purple");
grd.addColorStop(0.3, "pink");
grd.addColorStop(0.5, "purple");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
///////////////Rectangles (Courtesy of Megan)
var maxLoop = 20
for (var i =0; i<maxLoop; i+=1){
var x = canvas.width * Math.random() ;
var y = 400 * Math.random() ;
var w = 300 * Math.random();
var h = 600 * Math.random() + canvas.height/2;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R2+","+G2+","+B2+",0.7)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA6 = "rgba("+R3+","+G3+","+B3+",0.7)";
context.beginPath();
context.rect(x,y,w,h);
context.fillStyle = RGBA5;
context.fill();
context.lineWidth = 5;
context.stroke;
context.stroke();
context.closePath();
}
//////////////////////
///////
var inc = 10;
for (var i=0; i < canvas.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas.width-i, 0);
context1.lineTo(0, i); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(0,255,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i, canvas.height/2);
context1.lineTo(canvas.width/2, canvas.height/2-i);
context1.lineTo(canvas.width/2, canvas.height/2);
context1.fillStyle = "rgba(255,0,0,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(0, i);
context1.lineTo(i, canvas.height/2);
context1.lineTo(0, canvas.height/2);
context1.fillStyle = "rgba(0,255,0,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i, 0);
context1.lineTo(canvas.width/2, i);
context1.lineTo(canvas.width/2, 0);
context1.fillStyle = "rgba(0,0,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.strokeStyle = "purple";
context1.lineWidth = 1;
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI*2*i/60);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
<meta charset="UTF-8">
<style >
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "purple");
grd.addColorStop(0.3, "pink");
grd.addColorStop(0.5, "purple");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
///////////////Rectangles (Courtesy of Megan)
var maxLoop = 20
for (var i =0; i<maxLoop; i+=1){
var x = canvas.width * Math.random() ;
var y = 400 * Math.random() ;
var w = 300 * Math.random();
var h = 600 * Math.random() + canvas.height/2;
var R2 = Math.round(Math.random()*255);
var G2 = Math.round(Math.random()*255);
var B2 = Math.round(Math.random()*255);
var RGBA5 = "rgba("+R2+","+G2+","+B2+",0.7)";
var R3 = Math.round(Math.random()*255);
var G3 = Math.round(Math.random()*255);
var B3 = Math.round(Math.random()*255);
var RGBA6 = "rgba("+R3+","+G3+","+B3+",0.7)";
context.beginPath();
context.rect(x,y,w,h);
context.fillStyle = RGBA5;
context.fill();
context.lineWidth = 5;
context.stroke;
context.stroke();
context.closePath();
}
//////////////////////
///////
var inc = 10;
for (var i=0; i < canvas.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas.width-i, 0);
context1.lineTo(0, i); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(0,255,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i, canvas.height/2);
context1.lineTo(canvas.width/2, canvas.height/2-i);
context1.lineTo(canvas.width/2, canvas.height/2);
context1.fillStyle = "rgba(255,0,0,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(0, i);
context1.lineTo(i, canvas.height/2);
context1.lineTo(0, canvas.height/2);
context1.fillStyle = "rgba(0,255,0,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i, 0);
context1.lineTo(canvas.width/2, i);
context1.lineTo(canvas.width/2, 0);
context1.fillStyle = "rgba(0,0,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.strokeStyle = "purple";
context1.lineWidth = 1;
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI*2*i/60);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
<meta charset="UTF-8">
<style >
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
//////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
var m = 30; // AMOUNT OF SQUARES
var inc = 10;
for (var i=0; i<m; i++) { // i++ equal to i=i+1 or i+=1
var x = 0 +i*inc;
var y = 0 +i*inc;
var w = canvas1.width - 2*inc*i;
var h = canvas1.height - 2*inc*i;
var R = 155 - i+30;
var G = Math.round(Math.random()*255);
var B = 55 - i+30;
context1.beginPath();
context1.rect(x, y, w, h);
context1.fillStyle = "rgb("+R+","+G+","+B+")";
context1.fill();
context1.lineWidth = 3;
context1.strokeStyle = "black";
context1.stroke();
context1.closePath();
}
//// END OF SQUARES
for ( var i=0; i<canvas1.width; i+= 10) {
var x = 310+i;
var y = 290+i;
var w = 100+i;
var h = 50;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*2 * Math.random();
var R = Math.round(Math.random() * 255);
var G = Math.round(255 - i/canvas1.width * 255);
var B = Math.round(i/canvas1.width * 255);
var C = "rgb("+R+","+G+","+B+")";
var D = "rgb("+B+","+G+","+R+")";
var E = "rgb("+G+","+R+","+B+")";
var grd = context1.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context1.save();
context1.translate(x,y); // NEW (0,0) coordinates
context1.rotate(a);
context1.beginPath();
context1.fillStyle = grd;
context1.fillRect(rx,ry,w,h);
context1.stroke();
context1.closePath();
context1.restore();
}
/////// Second Swirl
for ( var i=0; i<canvas1.width; i+= 80) {
var x = 00+i;
var y = 0+i;
var w = 20+i;
var h = 50;
var rx = -w*2;
var ry = -h*2;
var a = Math.PI*2 * Math.random();
var R = Math.round(Math.random() * 5);
var G = Math.round(255 - i/canvas1.width * 255);
var B = Math.round(i/canvas1.width * 255);
var C = "rgb("+R+","+G+","+B+")";
var D = "rgb("+B+","+G+","+R+")";
var E = "rgb("+G+","+R+","+B+")";
var grd = context1.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context1.save();
context1.translate(x,y); // NEW (0,0) coordinates
context1.rotate(a);
context1.beginPath();
context1.fillStyle = grd;
context1.fillRect(rx,ry,w,h);
context1.stroke();
context1.closePath();
context1.restore();
}
///////
var inc = 7;
for (var i=0; i < canvas1.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas1.width-i, 0);
context1.lineTo(0, i*12); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(255,255,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI / i);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
//////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
var m = 30; // AMOUNT OF SQUARES
var inc = 10;
for (var i=0; i<m; i++) { // i++ equal to i=i+1 or i+=1
var x = 0 +i*inc;
var y = 0 +i*inc;
var w = canvas1.width - 2*inc*i;
var h = canvas1.height - 2*inc*i;
var R = 155 - i+30;
var G = Math.round(Math.random()*255);
var B = 55 - i+30;
context1.beginPath();
context1.rect(x, y, w, h);
context1.fillStyle = "rgb("+R+","+G+","+B+")";
context1.fill();
context1.lineWidth = 3;
context1.strokeStyle = "black";
context1.stroke();
context1.closePath();
}
//// END OF SQUARES
for ( var i=0; i<canvas1.width; i+= 10) {
var x = 310+i;
var y = 290+i;
var w = 100+i;
var h = 50;
var rx = -w/2;
var ry = -h/2;
var a = Math.PI*2 * Math.random();
var R = Math.round(Math.random() * 255);
var G = Math.round(255 - i/canvas1.width * 255);
var B = Math.round(i/canvas1.width * 255);
var C = "rgb("+R+","+G+","+B+")";
var D = "rgb("+B+","+G+","+R+")";
var E = "rgb("+G+","+R+","+B+")";
var grd = context1.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context1.save();
context1.translate(x,y); // NEW (0,0) coordinates
context1.rotate(a);
context1.beginPath();
context1.fillStyle = grd;
context1.fillRect(rx,ry,w,h);
context1.stroke();
context1.closePath();
context1.restore();
}
/////// Second Swirl
for ( var i=0; i<canvas1.width; i+= 80) {
var x = 00+i;
var y = 0+i;
var w = 20+i;
var h = 50;
var rx = -w*2;
var ry = -h*2;
var a = Math.PI*2 * Math.random();
var R = Math.round(Math.random() * 5);
var G = Math.round(255 - i/canvas1.width * 255);
var B = Math.round(i/canvas1.width * 255);
var C = "rgb("+R+","+G+","+B+")";
var D = "rgb("+B+","+G+","+R+")";
var E = "rgb("+G+","+R+","+B+")";
var grd = context1.createLinearGradient(rx,ry, rx+w, ry+h);
grd.addColorStop(0, C);
grd.addColorStop(0.5, D);
grd.addColorStop(1, E);
SQUARE(x,y,w,h,rx,ry,a,grd);
}
function SQUARE(x,y,w,h,rx,ry,a,grd) {
context1.save();
context1.translate(x,y); // NEW (0,0) coordinates
context1.rotate(a);
context1.beginPath();
context1.fillStyle = grd;
context1.fillRect(rx,ry,w,h);
context1.stroke();
context1.closePath();
context1.restore();
}
///////
var inc = 7;
for (var i=0; i < canvas1.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas1.width-i, 0);
context1.lineTo(0, i*12); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(255,255,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI / i);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
///////////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "black");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.5, "black");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*300;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
context1.beginPath();
context1.arc(x,y,rad,startA,endA,cw);
var grd = context1.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context1.fillStyle = grd;
context1.fill();
//context1.stroke();
context1.closePath();
}
}
{
var inc = 8;
for (var i=0; i < canvas.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas.width-i, 0);
context1.lineTo(0, i*6); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(0,155,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i/2, canvas.height);
context1.lineTo(canvas.width, canvas.height-i);
context1.lineTo(canvas.width, canvas.height);
context1.fillStyle = "rgba(200,0,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(0, i);
context1.lineTo(i/2, canvas.height);
context1.lineTo(0, canvas.height);
context1.fillStyle = "rgba(160,75,84,55,.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i/1, 0);
context1.lineTo(canvas.width, i/2);
context1.lineTo(canvas.width, 0);
context1.fillStyle = "rgba(100,55,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context1.lineWidth = .75;
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI*1*i/25);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
///////////////////
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.rect(0, 560, 900, 900); // x,y,width, height
grd = context.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "black");
grd.addColorStop(0.3, "black");
grd.addColorStop(0.5, "black");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// start here
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*300;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
context1.beginPath();
context1.arc(x,y,rad,startA,endA,cw);
var grd = context1.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context1.fillStyle = grd;
context1.fill();
//context1.stroke();
context1.closePath();
}
}
{
var inc = 8;
for (var i=0; i < canvas.height; i+=inc ) {
context1.beginPath();
context1.moveTo(canvas.width-i, 0);
context1.lineTo(0, i*6); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(0,155,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i/2, canvas.height);
context1.lineTo(canvas.width, canvas.height-i);
context1.lineTo(canvas.width, canvas.height);
context1.fillStyle = "rgba(200,0,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(0, i);
context1.lineTo(i/2, canvas.height);
context1.lineTo(0, canvas.height);
context1.fillStyle = "rgba(160,75,84,55,.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i/1, 0);
context1.lineTo(canvas.width, i/2);
context1.lineTo(canvas.width, 0);
context1.fillStyle = "rgba(100,55,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context1.lineWidth = .75;
}
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI*1*i/25);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
/// FOUR POINT STAR
//var cw = canvas.width;
//var ch = canvas.height;
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "black";
context.fill();
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*30;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 215);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
}
{
var inc = 2;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = "rgba(200,0,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/1, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width, 0);
context.fillStyle = "rgba(100,55,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context.lineWidth = .75;
}
}
///////////////Star
var cw = Math.random()*50;
var ch = cw ;
context.beginPath();
var locX = Math.random()*800;
var locY = Math.random()*800;
//
var loc = 100;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
context.moveTo(Ax, Ay);
context.lineTo(Bx, By);
context.lineTo(Cx, Cy);
context.lineTo(Dx, Dy);
context.lineTo(Ex, Ey);
context.lineTo(Fx, Fy);
context.lineTo(Gx, Gy);
context.lineTo(Hx, Hy);
context.lineTo(Ax, Ay);
//
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 3;
context.stroke "gold";
context.lineJoin = "round";
context.lineCap = 'round';
context.stroke();
context.closePath();
//////////////////////
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
/// FOUR POINT STAR
//var cw = canvas.width;
//var ch = canvas.height;
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "black";
context.fill();
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*30;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 215);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
}
{
var inc = 2;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = "rgba(200,0,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/1, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width, 0);
context.fillStyle = "rgba(100,55,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context.lineWidth = .75;
}
}
///////////////Star
var cw = Math.random()*50;
var ch = cw ;
context.beginPath();
var locX = Math.random()*800;
var locY = Math.random()*800;
//
var loc = 100;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
context.moveTo(Ax, Ay);
context.lineTo(Bx, By);
context.lineTo(Cx, Cy);
context.lineTo(Dx, Dy);
context.lineTo(Ex, Ey);
context.lineTo(Fx, Fy);
context.lineTo(Gx, Gy);
context.lineTo(Hx, Hy);
context.lineTo(Ax, Ay);
//
context.fillStyle = "yellow";
context.fill();
context.lineWidth = 3;
context.stroke "gold";
context.lineJoin = "round";
context.lineCap = 'round';
context.stroke();
context.closePath();
//////////////////////
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
////////////////////////////////////// start here
/// FOUR POINT STAR
//var cw = canvas.width;
//var ch = canvas.height;
context1.beginPath();
context1.rect(0,0,canvas.width, canvas.height);
context1.rect(0, 560, 900, 900); // x,y,width, height
grd = context1.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context1.fillStyle = grd;
context1.fill();
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*30;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 215);
context1.beginPath();
context1.arc(x,y,rad,startA,endA,cw);
var grd = context1.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context1.fillStyle = grd;
context1.fill();
//context1.stroke();
context1.closePath();
}
}
{
var inc = 2;
for (var i=0; i < canvas.height; i+=inc ) {
context1.beginPath();
context1.moveTo(i/2, canvas.height);
context1.lineTo(canvas.width, canvas.height-i);
context1.lineTo(canvas.width, canvas.height);
context1.fillStyle = "rgba(200,0,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i/1, 0);
context1.lineTo(canvas.width, i/2);
context1.lineTo(canvas.width, 0);
context1.fillStyle = "rgba(100,55,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context1.lineWidth = .75;
}
}
///////////////Star
var cw = Math.random()*50;
var ch = cw ;
context1.beginPath();
var locX = Math.random()*800;
var locY = Math.random()*800;
//
var loc = 100;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
context1.moveTo(Ax, Ay);
context1.lineTo(Bx, By);
context1.lineTo(Cx, Cy);
context1.lineTo(Dx, Dy);
context1.lineTo(Ex, Ey);
context1.lineTo(Fx, Fy);
context1.lineTo(Gx, Gy);
context1.lineTo(Hx, Hy);
context1.lineTo(Ax, Ay);
context1.beginPath();
context1.moveTo(canvas.width-i, 0);
context1.lineTo(0, i*6); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(122,155,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
//
context1.fillStyle = "yellow";
context1.fill();
context1.lineWidth = 3;
context1.stroke "gold";
context1.lineJoin = "round";
context1.lineCap = 'round';
context1.stroke();
context1.closePath();
//////////////////////
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI / i);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
////////////////////////////////////// start here
/// FOUR POINT STAR
//var cw = canvas.width;
//var ch = canvas.height;
context1.beginPath();
context1.rect(0,0,canvas.width, canvas.height);
context1.rect(0, 560, 900, 900); // x,y,width, height
grd = context1.createLinearGradient(100, 1100, 1000, 500, 300, 450);
grd.addColorStop(0, "#164f67");
grd.addColorStop(0.3, "#164f67");
grd.addColorStop(0.5, "#2488b2");
grd.addColorStop(1, "#164f67");
context1.fillStyle = grd;
context1.fill();
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*30;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 215);
context1.beginPath();
context1.arc(x,y,rad,startA,endA,cw);
var grd = context1.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context1.fillStyle = grd;
context1.fill();
//context1.stroke();
context1.closePath();
}
}
{
var inc = 2;
for (var i=0; i < canvas.height; i+=inc ) {
context1.beginPath();
context1.moveTo(i/2, canvas.height);
context1.lineTo(canvas.width, canvas.height-i);
context1.lineTo(canvas.width, canvas.height);
context1.fillStyle = "rgba(200,0,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.beginPath();
context1.moveTo(i/1, 0);
context1.lineTo(canvas.width, i/2);
context1.lineTo(canvas.width, 0);
context1.fillStyle = "rgba(100,55,44,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
context1.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context1.lineWidth = .75;
}
}
///////////////Star
var cw = Math.random()*50;
var ch = cw ;
context1.beginPath();
var locX = Math.random()*800;
var locY = Math.random()*800;
//
var loc = 100;
var Ax = cw*5/10+locX;
var Ay = ch*2/10+locY;
var Bx = cw*4/10+locX;
var By = ch*4/10+locY;
var Cx = cw*2/10+locX;
var Cy = ch*5/10+locY;
var Dx = Bx;
var Dy = ch*6/10+locY;
var Ex = Ax;
var Ey = ch*8/10+locY;
var Fx = cw*6/10+locX;
var Fy = Dy;
var Gx = cw*8/10+locX;
var Gy = Cy;
var Hx = Fx;
var Hy = By;
context1.moveTo(Ax, Ay);
context1.lineTo(Bx, By);
context1.lineTo(Cx, Cy);
context1.lineTo(Dx, Dy);
context1.lineTo(Ex, Ey);
context1.lineTo(Fx, Fy);
context1.lineTo(Gx, Gy);
context1.lineTo(Hx, Hy);
context1.lineTo(Ax, Ay);
context1.beginPath();
context1.moveTo(canvas.width-i, 0);
context1.lineTo(0, i*6); // increment is 20
context1.lineTo(0,0);
context1.fillStyle = "rgba(122,155,255,0.01)";
context1.fill();
context1.stroke();
context1.closePath();
//
context1.fillStyle = "yellow";
context1.fill();
context1.lineWidth = 3;
context1.stroke "gold";
context1.lineJoin = "round";
context1.lineCap = 'round';
context1.stroke();
context1.closePath();
//////////////////////
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
context.save();
context.translate(canvas.width/2, canvas.height/2);
for (var i=1; i<11; i++) {
context.rotate(Math.PI / i);
context.drawImage(canvas1, 0,0, canvas.width/2, canvas.height/2);
}
context.restore();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*300;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
}
{
var inc = 8;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i*6); // increment is 20
context.lineTo(0,0);
context.fillStyle = "rgba(0,155,255,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = "rgba(200,0,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i/2, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = "rgba(160,75,84,55,.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/1, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width, 0);
context.fillStyle = "rgba(100,55,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context.lineWidth = .75;
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
{
for (var i=0; i<600; i+=1) {
var x = canvas.width * Math.random();
var y = canvas.height * Math.random();
var rad = i;
var rad = Math.random()*300;
var startA = 0;
var endA = Math.PI * 2;
var cw = true;
var x1 = x - 50;
var y1 = y - 50;
var x2 = x + 50;
var y2 = y + 50;
var R = Math.round(Math.random() * 255);
var G = Math.round(Math.random() * 255);
var B = Math.round(Math.random() * 255);
context.beginPath();
context.arc(x,y,rad,startA,endA,cw);
var grd = context.createLinearGradient(x1,y1,x2,y2);
grd.addColorStop(0, "rgba(0,0,0,1)");
grd.addColorStop(1, "rgba("+R+","+G+","+B+",1)");
context.fillStyle = grd;
context.fill();
//context.stroke();
context.closePath();
}
}
{
var inc = 8;
for (var i=0; i < canvas.height; i+=inc ) {
context.beginPath();
context.moveTo(canvas.width-i, 0);
context.lineTo(0, i*6); // increment is 20
context.lineTo(0,0);
context.fillStyle = "rgba(0,155,255,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/2, canvas.height);
context.lineTo(canvas.width, canvas.height-i);
context.lineTo(canvas.width, canvas.height);
context.fillStyle = "rgba(200,0,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(0, i);
context.lineTo(i/2, canvas.height);
context.lineTo(0, canvas.height);
context.fillStyle = "rgba(160,75,84,55,.01)";
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(i/1, 0);
context.lineTo(canvas.width, i/2);
context.lineTo(canvas.width, 0);
context.fillStyle = "rgba(100,55,44,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "rgba("+R+","+G+","+B+",1)";
context.lineWidth = .75;
}
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>