And nearing one in the morning, I believe I'm starting to hallucinate kind of like the mushroom's that Mario eats. He gets bigger, I lose sanity.
Not a fair trade.
CODE
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
/*
context.beginPath();
context.rect(0,0,800,600);
var grd = context.createLinearGradient(400,300,400,600);
context.addColorStop(0,'rgb(150,150,255)');
context.addColorStop(1,'rgb(175,175,255)');
context.fillStyle = grd;
context.fill();
context.stroke();
*/
context.beginPath();
context.rect(0,0,800,600);
context.lineWidth = .1;
var grd = context.createLinearGradient(400,0,400,600);
grd.addColorStop(0, '#699cf9');
grd.addColorStop(1, '#90c1f8');
context.fillStyle = grd;
context.strokeStyle = '#90c1f8';
context.fill();
context.stroke();
/*
///Failed Question Mark Blocks..
context.beginPath();
context.rect(550,200,75,75);
context.lineWidth = 5;
context.lineCap = 'round';
context.strokeStyle = 'black';
context.fillStyle = '#be8f08';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(550,200);
context.arcTo(
context.stroke();
var x = 550;
var y = 200;
var w = 75;
var h = 75;
var radius = 20;
var r = x + w;
var b = y + h;
context.beginPath();
context.strokeStyle= 'black';
context.lineWidth="4";
context.moveTo(x+radius, y);
context.lineTo(r-radius, y);
context.quadraticCurveTo(r, y, r, y+radius);
context.lineTo(r, y+h-radius);
context.quadraticCurveTo(r, b, r-radius, b);
context.lineTo(x+radius, b);
context.quadraticCurveTo(x, b, x, b-radius);
context.lineTo(x, y+radius);
context.quadraticCurveTo(x, y, x+radius, y);
context.fillStyle = '#be8f08';
context.fill();
context.stroke();
context.closePath();
var x1 = 200;
var y1 = 200;
var w1 = 50;
var h1 = 50;
var radius = 20;
var r = x + w;
var b = y + h;
context.beginPath();
context.strokeStyle= 'black';
context.lineWidth="4";
context.moveTo(x1+radius, y1);
context.lineTo(r-radius, y1);
context.quadraticCurveTo(r, y1, r, y1+radius);
context.lineTo(r, y+h-radius);
context.quadraticCurveTo(r, b, r-radius, b);
context.lineTo(x1+radius, b);
context.quadraticCurveTo(x1, b, x1, b-radius);
context.lineTo(x1, y1+radius);
context.quadraticCurveTo(x1, y1, x1+radius, y1);
context.fillStyle = '#be8f08';
context.fill();
context.stroke();
*/
//End failed question mark blocks.. ^
//Green Tower
context.beginPath();
context.rect(125,214.5,175,514.5);
context.lineWidth = 5;
context.strokeStyle = '#6cb38a';
context.fillStyle = '#9ee1a8';
context.fill();
context.stroke();
context.closePath();
//inner green rectangle tower
context.beginPath();
context.rect(135,224.5,155,514.5);
context.lineWidth = 5;
context.strokeStyle = '#88c790';
context.fillStyle = '#88c790';
context.fill();
context.stroke();
context.closePath();
//top left angle, green box
context.beginPath();
context.moveTo(129,224.5);
context.lineTo(135,224.5);
context.lineTo(135,218.5);
context.lineWidth = 3;
context.strokeStyle = '#68b27c';
context.stroke();
context.closePath();
//shading right side green rectangle
context.beginPath();
context.rect(290,224.5, 6.5,400);
context.fillStyle = '#76a97e';
context.fill();
context.stroke();
context.closePath();
//triangle angle shading top right green triangle
context.beginPath();
context.moveTo(288,224.5);
context.lineTo(300,214.5);
context.lineTo(300,224.5);
context.fillStyle = '#76a97e';
context.fill();
context.stroke();
//top right angle, green box
context.beginPath();
context.moveTo(288,224.5);
context.lineTo(294,224.5);
context.lineTo(294,218.5);
context.lineWidth = 3;
context.strokeStyle = '#6bb47e';
context.stroke();
context.closePath();
//base big block, coral
context.beginPath();
context.rect(237.5,340,162.5,514.5);
context.strokeStyle = '#e9a26a';
context.lineWidth = 5;
context.fillStyle = '#fccf97';
context.fill();
context.stroke();
context.closePath();
//inner big block, coral
context.beginPath();
context.rect(247.5,350,142.5,514.5);
context.strokeStyle = '#f0b780';
context.lineWidth = 5;
context.fillStyle = '#f0b780';
context.fill();
context.stroke();
context.closePath();
//top left angle, coral
context.beginPath();
context.moveTo(241.5,350);
context.lineTo(247.5,350);
context.lineTo(247.5,345);
context.strokeStyle = '#e2a475';
context.lineWidth = 3;
context.stroke();
context.closePath();
//top right triangle shading, coral
context.beginPath();
context.moveTo(390,350);
context.lineTo(400,340);
context.lineTo(400,350);
context.strokeStyle = '#bd9b71';
context.fillStyle = '#bd9b71';
context.fill();
context.stroke();
context.closePath();
//right side shading, coral
context.beginPath();
context.rect(390,350,10,400);
context.strokeStyle = '#bd9b71';
context.fillStyle = '#bd9b71';
context.fill();
context.stroke();
context.closePath();
//top right angle, coral
context.beginPath();
context.moveTo(385,350);
context.lineTo(391,350);
context.lineTo(391,345);
context.strokeStyle = '#e2a475';
context.fillStyle = 'rgba(0,0,0,0)';
context.lineWidth = 3;
context.stroke();
context.fill();
context.closePath();
//green man #4 (one to the left on top)
context.beginPath();
context.moveTo(80,350);
context.lineTo(80,320);
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(142.8,320,20*Math.PI,21*Math.PI,false);
context.strokeStyle = 'black';
context.fillStyle = '#009f00';
context.lineWidth = 5;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(205.4,320);
context.lineTo(205.4,425);
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.rect(85,320,115.6,200);
context.fillStyle = '#009f00';
context.strokeStyle = '#009f00';
context.fill();
context.stroke();
context.beginPath();
context.rect(130,280,3,3);
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.rect(155,280,3,3);
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.fill();
context.stroke();
/*
context.beginPath();
context.rect(125,395,100,50);
context.fillStyle = '#009f00';
context.strokeStyle = '#009f00';
context.fill();
context.stroke();
*/
//green man #5, I'm dying! ... REMIX.
context.beginPath();
context.arc(300,460,20*Math.PI,21*Math.PI,false);
context.fillStyle = '#009f00';
context.strokeStyle = 'black';
context.lineWidth = 5;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(362.5,460);
context.lineTo(362.5,580);
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.rect(250,460,108,100);
context.fillStyle = '#009f00';
context.strokeStyle = '#009f00';
context.fill();
context.stroke();
context.beginPath();
context.rect(285,420,3,3);
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.rect(310,420,3,3);
context.strokeStyle = 'black';
context.stroke();
//green man #3 Line (left side)
context.beginPath();
context.moveTo(50,516);
context.lineTo(50,400);
context.strokeStyle = 'black';
context.lineWidth = 5;
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(112.8,400,20*Math.PI,21*Math.PI,false);
context.fillStyle = '#009f00';
context.lineWidth = 5;
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.rect(55,400,115.6,200);
context.fillStyle = '#009f00';
context.strokeStyle = '#009f00';
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(175.6,400);
context.lineTo(175.6,406);
context.strokeStyle = 'black';
context.lineWidth = 5;
context.stroke();
context.closePath();
//eyes green man #3
context.beginPath();
context.rect(125,355,3,3);
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//eyes green man #3
context.beginPath();
context.rect(100,355,3,3);
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//green man #2
context.beginPath();
context.arc(180,465,20*Math.PI,21*Math.PI,false);
context.closePath();
context.fillStyle = '#009f00'
context.lineWidth = 5;
context.strokeStyle = 'black';
context.fill();
context.stroke();
//green man line cover up #2
context.beginPath();
context.rect(115,464,100,200);
context.fillStyle = '#009f00';
context.strokeStyle = '#009f00';
context.fill();
context.stroke();
context.closePath();
//green man #2 left eye
context.beginPath();
context.rect(165,428,3,3);
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//green man #2 right eye
context.beginPath();
context.rect(190,428,3,3);
context.fillStyle = 'black';
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//attempted green man #1
context.beginPath();
context.arc(250,520,20*Math.PI,30*Math.PI,false);
context.closePath();
context.fillStyle = '#009f00';
context.lineWidth = 5;
context.strokeStyle = 'black';
context.fill();
context.stroke();
//green man #1's left eye
context.beginPath();
context.rect(235,480,3,3);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//green man #1's right eye
context.beginPath();
context.rect(260,480,3,3);
context.fillStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//teal box, lower right.
context.beginPath();
context.moveTo(700,300);
context.lineTo(700,400);
context.lineTo(850,800);
context.lineTo(850,290);
context.lineTo(710,290);
context.quadraticCurveTo(700,290,700,300);
context.strokeStyle = 'black';
context.fillStyle = 'rgb(88,200,247)';
context.lineWidth = 5;
context.fill();
context.stroke();
//coral box, lower right
context.beginPath();
context.moveTo(600,400);
context.lineTo(600,500);
context.quadraticCurveTo(600,515,610,515);
context.lineTo(750,515);
context.quadraticCurveTo(760,515,760,505);
context.lineTo(760,400);
context.quadraticCurveTo(760,390,750,390);
context.lineTo(610,390);
context.quadraticCurveTo(600,390,600,400);
context.fillStyle = 'rgb(247,143,70)';
context.lineWidth = 5;
context.strokeStyle = 'black';
context.fill();
context.stroke();
context.closePath();
//coral box's screws
context.beginPath();
context.arc(620,410,8,0,2*Math.PI,false);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(615,415);
context.lineTo(625,405);
context.lineWidth = 3;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.arc(740,410,8,0,2*Math.PI,false);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(735,415);
context.lineTo(745,405);
context.lineWidth = 3;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.arc(620,500,8,0,2*Math.PI,false);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.arc(740,500,8,0,2*Math.PI,false);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(735,505);
context.lineTo(745,495);
context.lineWidth = 3;
context.strokeStyle = 'red';
context.stroke();
context.beginPath();
context.moveTo(615,505);
context.lineTo(625,495);
context.lineWidth = 3;
context.strokeStyle = 'red';
context.stroke();
//blue box's screw
context.beginPath();
context.arc(720,310,8,0,2*Math.PI,false);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(725,305);
context.lineTo(715,315);
context.lineWidth = 3;
context.strokeStyle = 'red';
context.stroke();
//blue box shadow.
context.beginPath();
context.moveTo(760,400);
context.lineTo(780,400);
context.quadraticCurveTo(785,400,785,405);
context.lineTo(790,800);
context.lineTo(760,800);
context.strokeStyle = 'rgba(0,0,0,.0)';
context.fillStyle = 'rgba(0,0,0,.4)';
context.fill();
context.stroke();
/*
//brick block
context.beginPath();
context.moveTo(520,270);
context.lineTo(520,310);
context.quadraticCurveTo(520,315,525,315);
context.lineTo(565,315);
context.quadraticCurveTo(570,315,570,310);
context.lineTo(570,270);
context.quadraticCurveTo(570,265,565,265);
context.lineTo(525,265);
context.quadraticCurveTo(520,265,520,270);
context.lineWidth = 3;
context.fillStyle = 'gold';
context.strokeStyle = 'black';
context.fill();
context.stroke();
*/
//bottom set of gold cubes
context.beginPath();
context.moveTo(450,370);
context.lineTo(450,410);
context.quadraticCurveTo(450,415,455,415);
context.lineTo(495,415);
context.quadraticCurveTo(500,415,500,410);
context.lineTo(500,370);
context.quadraticCurveTo(500,365,495,365);
context.lineTo(455,365);
context.quadraticCurveTo(450,365,450,370);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'gold';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500,370);
context.lineTo(500,410);
context.quadraticCurveTo(500,415,505,415);
context.lineTo(545,415);
context.quadraticCurveTo(550,415,550,410);
context.lineTo(550,370);
context.quadraticCurveTo(550,365,545,365);
context.lineTo(505,365);
context.quadraticCurveTo(500,365,500,370);
context.lineWidth = 3;
context.strokeStyle = 'black';
context.fillStyle = 'gold';
context.fill();
context.stroke();
//bottom block thing
context.beginPath();
context.rect(0,514.5,800,30);
context.closePath();
var grd = context.createLinearGradient(400,514.5,400,550);
grd.addColorStop(0,'#eb9460');
grd.addColorStop(.75, '#9f5a2f');
context.fillStyle = grd;
context.strokeStyle = 'black';
context.fill();
context.stroke();
//bottom big block thing
context.beginPath();
context.rect(-10,534.5,900,100);
var grd = context.createLinearGradient(-10,534.5,800,550);
grd.addColorStop(0, '#aa5f22');
grd.addColorStop(1, '#933c00');
context.lineWidth = 0;
context.fillStyle = grd;
context.fill();
context.stroke();
context.closePath();
//triangle shine
context.beginPath();
context.rect(0,536.5,800,5);
context.strokeStyle = 'rgba(255,255,255,.0)';
context.lineWidth = 0;
context.fillStyle = 'rgba(255,255,255,.5)';
context.fill();
context.stroke();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment