Code for Second Project

Here is the code for my HTML project. I could not figure out how to put the image and the code in the same post.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">

body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}

body {
}

#myCanvas { border: rgba(255,255,255,1) medium dashed; }

</style>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//Rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#737595');
// white
grd.addColorStop(0.55, '#C9C9C9');
// dark blue
grd.addColorStop(1, '#0E4398');
context.fillStyle = grd;
context.fill();
context.stroke();

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);

// create radial gradient
var grd = context.createRadialGradient(415, 70, 10, 375, 210, 700);
// light blue
grd.addColorStop(0, 'rgba(0, 0, 0, 0.25)');
// grd.addColorStop(.3,'#ECF3B7');
grd.addColorStop(.3,'rgba(29, 26, 255, 0.15)');
grd.addColorStop(.5, 'rgba(0, 0, 0, 0.67)');
grd.addColorStop(.7, 'rgba(1, 0, 41, 0.22)');

context.fillStyle = grd;
context.fill();

// Moon
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 5;
var radius = 200;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#D7D9DB');
// yellow
grd.addColorStop(.1, '#ECF3B7');
// dark blue
grd.addColorStop(1, '#395A8F');
context.fillStyle = grd;
context.fill();
context.stroke();

// Rocks
context.beginPath();
context.moveTo(5, 600);
context.bezierCurveTo(150, 500, 500, 500, 800, 600);

// complete custom shape
context.closePath();
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
//
grd.addColorStop(.3, '#E0E0EE');
//
grd.addColorStop(.6, '#63637D');
grd.addColorStop(1, '#373A3E');
context.fillStyle = grd;
context.fill();
context.lineWidth = '2';
context.strokeStyle='gray';
context.stroke();

// Top SemiCircle Pokeball
context.beginPath();
context.arc(288, 510, 20, 0, Math.PI, true);
context.closePath();
context.lineWidth = 3;
context.fillStyle = 'red';
context.fill();
context.strokeStyle = '#000000';
context.stroke();

// Bottom SemiCircle Pokeball
context.beginPath();
context.arc(288, 510, 20, 0, Math.PI, false);
context.closePath();
context.lineWidth = 3;
context.fillStyle = 'white';
context.fill();
context.strokeStyle = '#000000';
context.stroke();

// Small Circle Pokeball
context.beginPath();
context.arc(288,510,5,0,2*Math.PI);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#000000';
context.stroke();

// //Weedle First line Horn
// context.beginPath();
// context.moveTo(640, 480);
// context.lineTo(630, 515);
// context.stroke();
//
// //Weedle Second Line Horn
// context.beginPath();
// context.moveTo(640, 480);
// context.lineTo(660, 515);
// context.stroke();

// First Circle Tail
context.beginPath();
context.arc(720,550,7,0,2*Math.PI);
context.fillStyle = '#FBFBBC';
context.fill();
context.lineWidth = 2;
context.fillStyle=
context.strokeStyle = '#000000';
context.stroke();

//Second Tail
context.beginPath();
context.arc(710,557,9,0,2*Math.PI);
context.fillStyle = '#FBFBBC';
context.fill();
context.lineWidth = 2;
context.fillStyle=
context.strokeStyle = '#000000';
context.stroke();

//Third Tail
context.beginPath();
context.arc(700,564,12,0,2*Math.PI);
context.fillStyle = '#FBFBBC';
context.fill();
context.lineWidth = 2;
context.fillStyle=
context.strokeStyle = '#000000';
context.stroke();

//Fourth Tail
context.beginPath();
context.arc(682,567,15,0,2*Math.PI);
context.fillStyle = '#FBFBBC';
context.fill();
context.lineWidth = 2;
context.fillStyle=
context.strokeStyle = '#000000';
context.stroke();

//Fifth Tail
context.beginPath();
context.arc(660,555,20,0,2*Math.PI);
context.fillStyle = '#FBFBBC';
context.fill();
context.lineWidth = 2;
context.fillStyle=
context.strokeStyle = '#000000';
context.stroke();

// Weedle Head
context.beginPath();
context.arc(646,530,23,0,2*Math.PI);
context.fillStyle = 'white';
context.fill();
context.lineWidth = 2;
context.fillStyle= '#FBFBBC'
context.fill();
context.strokeStyle = '#000000';
context.stroke();

// //Weedle Curve on Head
// context.beginPath();
// context.moveTo(630, 515);
// context.quadraticCurveTo(647, 525, 655, 510);

// // line color
// context.strokeStyle = 'black';
// context.stroke();

// Weedle Horn Custom Shape
// begin custom shape
context.beginPath();
context.moveTo(640, 480);
context.lineTo(630, 515);
context.quadraticCurveTo(643, 523, 660, 515);
// context.lineTo(660, 515);

// complete custom shape
context.closePath();
context.fillStyle = '#E6E8E9';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Weedle Left Eye
context.beginPath();
context.arc(635,525,4,0,2*Math.PI);
context.fillStyle = 'black';
context.fill();
context.strokeStyle='black';
context.stroke();

//Weedle White Spot
context.beginPath();
context.arc(633,522,2,0,2*Math.PI);
context.fillStyle = '#DDDDDD';
context.fill();

//Weedle Right Eye
context.beginPath();
context.arc(654,525,4,0,2*Math.PI);
context.fillStyle = 'black';
context.fill();
context.strokeStyle='black';
context.stroke();

//Weedle White Spot
context.beginPath();
context.arc(652,522,2,0,2*Math.PI);
context.fillStyle = '#DDDDDD';
context.fill();

//Nose
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(630, 538, 8, 0, 2 * Math.PI, false);

// restore to original state
context.restore();

// apply styling
context.fillStyle = '#F0A158';
context.fill();
context.lineWidth= '1';
context.strokeStyle = 'black';
context.stroke();

//Nose Spot
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(626, 536, 2, 0, 2 * Math.PI, false);

// restore to original state
context.restore();

// apply styling
context.fillStyle = '#BBBBBB';
context.fill();
context.lineWidth= '1';
context.strokeStyle = '#BBBBBB';
context.stroke();

// Weedle Horn Tail
// begin custom shape
context.beginPath();
context.moveTo(727, 545);
context.bezierCurveTo(723, 535, 735, 530, 745, 535);
context.quadraticCurveTo(740, 545, 730, 550);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#E6E8E9";
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Metapod
context.beginPath();
context.moveTo(150, 410);
context.bezierCurveTo(140, 425, 110, 460, 120, 475);
context.quadraticCurveTo(135, 490, 150, 500);
context.bezierCurveTo(160, 530, 190, 515, 200, 530);
context.quadraticCurveTo(215, 530, 215, 525);
context.quadraticCurveTo(205, 530, 175, 480);
context.quadraticCurveTo(180, 470, 190, 460);
context.bezierCurveTo(180, 460, 150, 420, 150, 410);

// complete custom shape
context.closePath();
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
//
grd.addColorStop(.3, '#73C46A');
//
grd.addColorStop(.6, '#63637D');
grd.addColorStop(1, '#3D5A45');
context.fillStyle = grd;
context.shadowColor = '#7C7A7A';
context.shadowBlur = 40;
context.shadowOffsetX = -10;
context.shadowOffsetY = 20;
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Metapods Eye
context.beginPath();
context.moveTo(150, 440);
context.bezierCurveTo(150, 460, 169, 450, 167, 447);

// complete custom shape
context.closePath();
context.fillStyle='#F3F4F7';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Metapods Iris
context.beginPath();
context.moveTo(154, 441);
context.quadraticCurveTo(156, 453, 165, 446);

// complete custom shape
context.closePath();
context.fillStyle='#000000';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Metapods Top Eye
context.beginPath();
context.moveTo(150, 440);
context.quadraticCurveTo(160, 425, 167, 447);

// complete custom shape
context.closePath();
context.fillStyle='#73C46A';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Metapods Bottom Lines Horizontal
context.beginPath();
context.moveTo(203, 520);
context.quadraticCurveTo(200, 527, 196, 525)

context.strokeStyle = 'black';
context.stroke();

// Metapods Bottom Lines second
context.beginPath();
context.moveTo(195, 510);
context.quadraticCurveTo(200, 520, 187, 522)

context.strokeStyle = 'black';
context.stroke();

// Metapods Bottom Lines third
context.beginPath();
context.moveTo(188, 500);
context.quadraticCurveTo(193, 515, 178, 520)

context.strokeStyle = 'black';
context.stroke();

// Metapods Bottom Vertical Line
context.beginPath();
context.moveTo(189, 508);
context.quadraticCurveTo(193, 520, 203, 523)

context.strokeStyle = 'black';
context.stroke();

// Metapods Bottom Vertical Line Left
context.beginPath();
context.moveTo(181, 517);
context.quadraticCurveTo(193, 520, 200, 525)

context.strokeStyle = 'black';
context.stroke();

// Metapods Line Coming Up
context.beginPath();
context.moveTo(181, 517);
context.quadraticCurveTo(165, 515, 160, 500)
context.quadraticCurveTo(135, 485, 135, 470)
context.quadraticCurveTo(140, 440, 150, 440)

context.strokeStyle = 'black';
context.stroke();

// Metapod Mid Level Lines
context.beginPath();
context.moveTo(160, 500);
context.quadraticCurveTo(165, 470, 160, 475)
context.quadraticCurveTo(165, 470, 130, 455)
context.quadraticCurveTo(135, 450, 130, 445)
context.quadraticCurveTo(127, 440, 125, 448)

context.strokeStyle = 'black';
context.stroke();

// Metapod Mid Level Lines
context.beginPath();
context.moveTo(160, 500);
context.quadraticCurveTo(165, 505, 150, 501)

context.strokeStyle = 'black';
context.stroke();

// Metapod Mid Level Lines
context.beginPath();
context.moveTo(136, 475);
context.quadraticCurveTo(130, 470, 125, 475)

context.strokeStyle = 'black';
context.stroke();

// Metapod Mid Level Lines
context.beginPath();
context.moveTo(121, 455);
context.quadraticCurveTo(115, 460, 131, 485)

context.strokeStyle = 'black';
context.stroke();

// Metapod Top Level Lines
context.beginPath();
context.moveTo(130, 455);
context.quadraticCurveTo(128, 460, 124, 457)
context.lineTo(122,455)

context.strokeStyle = 'black';
context.stroke();

// Mews Body
context.beginPath();
context.moveTo(161, 238);
context.quadraticCurveTo(140, 300, 150, 310)
context.quadraticCurveTo(145, 310, 140, 345)
context.quadraticCurveTo(147, 350, 153, 345)
context.quadraticCurveTo(150, 335, 159, 315)
context.quadraticCurveTo(165, 320, 175, 315)
context.quadraticCurveTo(180, 317, 185, 317)
context.quadraticCurveTo(180, 317, 182, 350)
context.quadraticCurveTo(188, 360, 192, 353)
context.quadraticCurveTo(190, 345, 193, 320)
context.bezierCurveTo(210, 320, 193, 280, 195, 290);
context.quadraticCurveTo(197, 265, 193, 240)

//complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "rgba(252, 212, 215, 1)";
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Mews Head
context.beginPath();
context.moveTo(175, 200);
context.quadraticCurveTo(150, 180, 155, 210);
context.bezierCurveTo(140, 240, 175, 240, 165, 240);
context.bezierCurveTo(170, 240, 175, 255, 195, 240)
context.bezierCurveTo(190, 245, 225, 230, 205, 215)
context.quadraticCurveTo(215, 190, 195, 205);
context.quadraticCurveTo(187, 195, 172, 203);

// complete custom shape
context.closePath();
context.fillStyle='#FFE3E8';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Mews Left Eye
context.beginPath();
context.moveTo(175, 225);
context.bezierCurveTo(180, 220, 160, 190, 160, 225);

// complete custom shape
context.closePath();
context.fillStyle='white';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Mews Left Eye Color
context.beginPath();
context.moveTo(175, 225);
context.bezierCurveTo(180, 220, 160, 190, 167, 225);

// complete custom shape
context.closePath();
context.fillStyle='#477EDE';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Mews Left Eye White Part
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(168, 212, 3, 0, 2 * Math.PI, false);

// restore to original state
context.restore();

// apply styling
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

// Mews Right Eye
context.beginPath();
context.moveTo(185, 225);
context.bezierCurveTo(180, 220, 205, 192, 200, 225);

// complete custom shape
context.closePath();
context.fillStyle='white';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Mews Right Eye Color
context.beginPath();
context.moveTo(185, 225);
context.bezierCurveTo(190, 195, 200, 225, 195, 225);

// complete custom shape
context.closePath();
context.fillStyle='#477EDE';
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Mews Right Eye White Part
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(192, 215, 3, 0, 2 * Math.PI, false);

// restore to original state
context.restore();

// apply styling
context.fillStyle = 'white';
context.fill();
context.strokeStyle = 'white';
context.stroke();

// Arc Left Eye
context.beginPath();
context.moveTo(176, 212);
context.quadraticCurveTo(180, 220, 179, 221);

// line color
context.strokeStyle = 'black';
context.stroke();

// Arc Right Eye
context.beginPath();
context.moveTo(186, 212);
context.quadraticCurveTo(180, 220, 183, 221);

// line color
context.strokeStyle = 'black';
context.stroke();

// Mews Left Toe lines
context.beginPath();
context.moveTo(143, 346);
context.quadraticCurveTo(145, 343, 145, 340)

context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(149, 347);
context.quadraticCurveTo(148, 343, 148, 340)

context.strokeStyle = 'black';
context.stroke();

// Mews Right Toe Lines
context.beginPath();
context.moveTo(186, 354);
context.quadraticCurveTo(185, 350, 185, 347)

context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(190, 355);
context.quadraticCurveTo(187, 350, 188, 347)

context.strokeStyle = 'black';
context.stroke();

// Mews Left Hip Lines
context.beginPath();
context.moveTo(152, 310);
context.quadraticCurveTo(154, 315, 160, 316)
context.quadraticCurveTo(175, 315, 170, 285)

context.strokeStyle = 'black';
context.stroke();

// Mews Right Hip Lines
context.beginPath();
context.moveTo(181, 317);
context.quadraticCurveTo(195, 320, 195, 290)

context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(186, 320);
context.quadraticCurveTo(187, 322, 193, 320)

context.strokeStyle = 'black';
context.stroke();

// Mews Little Arms
context.beginPath();
context.moveTo(162, 260);
context.quadraticCurveTo(160, 270, 168, 280)
context.lineTo(169, 275);
context.lineTo(171, 280);
context.lineTo(172, 273);
context.quadraticCurveTo(172, 270, 168, 255)

context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(183, 257);
context.quadraticCurveTo(177, 280, 180, 280)
context.lineTo(183,275);
context.lineTo(185,280);
context.lineTo(186,273);
context.quadraticCurveTo(189, 270, 188, 260)

context.strokeStyle = 'black';
context.stroke();

// Mews Tail
context.beginPath();
context.moveTo(147, 295);
context.bezierCurveTo(25, 230, 200, 200, 50, 160);
context.quadraticCurveTo(65, 175, 80, 175);
context.bezierCurveTo(155, 200, 35, 250, 146, 300)

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#FFE3E8";
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Gengar
context.beginPath();
context.moveTo(680, 135);
context.quadraticCurveTo(670, 137, 660, 145);
context.lineTo(657,140);
context.lineTo(655,145);
context.lineTo(650,137);
context.lineTo(647,143);
context.lineTo(630,120);
context.lineTo(625,160);
context.quadraticCurveTo(620, 150, 610, 145);
context.lineTo(608,150);
context.quadraticCurveTo(605, 147, 602, 150);
context.lineTo(608,155);
context.lineTo(603,157);
context.lineTo(610,160);
context.quadraticCurveTo(615, 170, 620, 175);
context.quadraticCurveTo(610, 187, 615, 205);
context.quadraticCurveTo(600, 220, 620, 230);
context.lineTo(623,235);
context.lineTo(625,230);
context.quadraticCurveTo(630, 240, 628, 239);
context.lineTo(631, 235);
context.lineTo(635,236);
context.quadraticCurveTo(633, 232, 635, 230);
context.quadraticCurveTo(633, 232, 647, 235);
context.quadraticCurveTo(650, 245, 655, 245);
context.lineTo(660,235);
context.bezierCurveTo(665, 260, 690, 240, 680, 215);
context.lineTo(690, 190);
context.lineTo(710, 180);
context.lineTo(715,183);
context.lineTo(713,175);
context.lineTo(720,173);
context.lineTo(710,170);
context.lineTo(714,167);
context.lineTo(690,162);
context.lineTo(721,150);
context.lineTo(680,151);
context.lineTo(686, 143);
context.lineTo(673,149);

// complete custom shape
context.closePath();
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
//
grd.addColorStop(.5, '#E0E0EE');
//
grd.addColorStop(.60, '#5B5B7E');
grd.addColorStop(.65, '#2F1C50');
context.fillStyle = grd;
context.shadowColor = '#4A4646';
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
context.strokeStyle = 'black';
context.stroke();

//Gengars Mouth
context.beginPath();
context.moveTo(627, 185);
context.quadraticCurveTo(650, 207, 675, 200);
context.quadraticCurveTo(645, 235, 627, 185);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#FFFFFF";
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Teeth
context.beginPath();
context.moveTo(643, 197);
context.lineTo(640, 208);

context.stroke();

context.beginPath();
context.moveTo(655, 200);
context.lineTo(651, 215);

context.stroke();

context.beginPath();
context.moveTo(627, 185);
context.lineTo(625, 182);

context.stroke();

context.beginPath();
context.moveTo(675, 200);
context.lineTo(678, 197);

context.stroke();

// Gengars Left Eye
context.beginPath();
context.moveTo(638, 165);
context.quadraticCurveTo(635, 200, 650, 175);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#EABEBE";
context.fill();
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(638, 165);
context.lineTo(636, 162);

context.stroke();

context.beginPath();
context.moveTo(646, 172);
context.lineTo(645, 176);
context.lineWidth = 2;
context.stroke()

// Gengars Right Eye
context.beginPath();
context.moveTo(680, 175);
context.quadraticCurveTo(675, 205, 665, 180);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#EABEBE";
context.fill();
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(680, 175);
context.lineTo(684, 174);

context.stroke();

context.beginPath();
context.moveTo(672, 178);
context.lineTo(671, 182);
context.lineWidth = 2;
context.stroke()

/// Gengars Lines Top Left
context.beginPath();
context.moveTo(624, 162);
context.quadraticCurveTo(625, 155, 633, 155);
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(620, 175);
context.lineTo(622, 170);
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(615, 206);
context.quadraticCurveTo(620, 215, 620, 212);
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(620, 230);
context.lineTo (622, 231);
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(635, 231);
context.quadraticCurveTo(625, 225, 630, 225);
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(648, 236);
context.quadraticCurveTo(653, 240, 660, 235);
context.lineWidth = 1;
context.stroke();

context.beginPath();
context.moveTo(684, 196);
context.quadraticCurveTo(690, 198, 690, 182);
context.lineWidth = 1;
context.stroke();

// Gengars Foot
context.beginPath();
context.moveTo(667, 243);
context.quadraticCurveTo(665, 230, 669, 238);
context.lineTo(672,235);
context.lineTo(674,239);
context.lineTo(672,242);
context.lineWidth = 1;
context.stroke();

//Pikachu's Body
context.beginPath();
context.moveTo(445, 430);
context.quadraticCurveTo(430, 415, 415, 420);
context.lineTo(423,407);
context.quadraticCurveTo(410, 395, 412, 395);
context.quadraticCurveTo(410, 395, 400, 435);
context.quadraticCurveTo(400, 435, 397, 445);
context.quadraticCurveTo(390, 460, 410, 465);
context.lineTo(407,470);
context.quadraticCurveTo(392, 477, 407, 485);
context.quadraticCurveTo(390, 540, 445, 520);
context.quadraticCurveTo(460, 520, 455, 480);
context.quadraticCurveTo(445, 460, 450, 440);
context.lineTo(470,425);
context.quadraticCurveTo(475, 420, 477, 408);
context.quadraticCurveTo(465, 410, 445, 430);

// complete custom shape
context.closePath();
context.lineWidth = 2;
context.fillStyle= "#EBE64A";
context.fill();
context.strokeStyle = 'black';
context.stroke();

//Pikachus Ears
context.beginPath();
context.moveTo(423, 407);
context.quadraticCurveTo(450, 360, 412, 395);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#000000";
context.fill();
context.strokeStyle = 'black';
context.stroke();

//Pikachus Right Ears
context.beginPath();
context.moveTo(477, 408);
context.quadraticCurveTo(520, 390, 470, 424);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#000000";
context.fill();
context.strokeStyle = 'black';
context.stroke();

// Pikachus Eyes
context.beginPath();
context.arc(412, 438, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#003300';
context.stroke();

context.beginPath();
context.arc(412, 437, 2, 0, 2 * Math.PI, false);
context.fillStyle = '#DADADA';
context.fill();
context.strokeStyle = '#F9FFF9';
context.stroke();

context.beginPath();
context.arc(433, 439, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#003300';
context.stroke();

context.beginPath();
context.arc(433, 438, 2, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = '#FFFFFF';
context.stroke();

// Pikachu Nose n Mouth
context.beginPath();
context.moveTo(420, 450);
context.quadraticCurveTo(420, 455, 422, 450);

// complete custom shape
context.closePath();
context.lineWidth = 1;
context.fillStyle= "#000000";
context.fill();
context.strokeStyle = 'black';
context.stroke();

context.beginPath();
context.moveTo(430, 465);
context.quadraticCurveTo(420, 450, 415, 460);

context.strokeStyle = 'black';
context.stroke();

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);

// create radial gradient
var grd = context.createRadialGradient(420, 450, 0, 430, 480, 325);
// light blue
grd.addColorStop(0, 'rgba(236,216,65,0.25)');
grd.addColorStop(.3,'#ECF3B7');
grd.addColorStop(.5, 'rgba(0,0,0,0.00)');

context.fillStyle = grd;
context.fill();
////
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 10px Arial';
context.fillStyle = "white";
context.fillText('Chris Molina', 20, 550);
context.closePath();

//Star
var rectWidth = 7;
var rectHeight = 7;

// translate context to center of canvas
context.translate(canvas.width /15, canvas.height / 10);

// rotate 45 degrees clockwise
context.rotate(Math.PI / 3);

var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
//
grd.addColorStop(.6, '#DFDEDE');
grd.addColorStop(1, '#1E1F1E');
context.fillStyle = grd;
context.shadowColor = '#000000';
context.shadowBlur = 20;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.fillRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight);

// var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// //
// grd.addColorStop(.3, '#73C46A');
// //
// grd.addColorStop(.6, '#63637D');
// grd.addColorStop(1, '#3D5A45');
// context.fillStyle = grd;
// context.shadowColor = '#7C7A7A';
// context.shadowBlur = 40;
// context.shadowOffsetX = -10;
// context.shadowOffsetY = 20;
// context.fill();
// context.strokeStyle = 'black';
// context.stroke();
</script>

</body>
</html>

Digital Foundations

Search This Blog

Code for Second Project

Comments

Post a Comment