<html>
<head>
<meta charset="UTF-8">
<title> dexter's laboratory </title>
<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
///////////////////// background
var lab = context.createLinearGradient(0,0,canvas.width, canvas.height);
lab.addColorStop(0, "rgb(128,148,250)");
lab.addColorStop(0.25, "rgb(64,152,196)");
lab.addColorStop(0.75, "rgb(139,221,255)");
lab.addColorStop(1, "rgb(128,148,250)");
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = lab;
context.fill();
context.closePath();
///////////// MACHINES ////////////
///////////////////// machine Left
context.beginPath();
context.moveTo(0,500);
context.lineTo(55,500);
context.lineTo(100,600);
context.lineTo(0,600);
context.fillStyle = "rgb(77,87,218)";
context.fill();
context.stroke();
context.closePath();
///////////// machine left line 1
context.beginPath();
context.moveTo(10,500);
context.lineTo(10,600);
context.lineWidth = 10;
context.strokeStyle = "rgb(40,9,128)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(50,500);
context.lineTo(50,600);
context.lineWidth = 10;
context.strokeStyle = "rgb(40,9,128)";
context.stroke();
context.closePath();
///////////////// machine NUCLEAR///////////
context.beginPath();
context.moveTo(55,500);
context.quadraticCurveTo(200,365,50,110);
context.lineWidth = 2;
context.fillStyle = "rgb(158,255,149)";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "rgb(7,250,7)";
context.stroke();
context.beginPath();
context.moveTo(55,500);
context.lineTo(0,500);
context.lineTo(51,110);
context.lineWidth = 2;
context.fillStyle = "rgb(29,249,234)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(94,189,255)";
context.stroke();
context.beginPath();
context.moveTo(50,110);
context.lineTo(0,110);
context.lineTo(0,500);
context.lineWidth = 2;
context.fillStyle = "rgb(158,255,149)";
context.fill();
context.strokeStyle = "rgb(113,248,253)";
context.stroke();
context.closePath();
//////////////// WIRES
context.beginPath();
context.moveTo(140,0);
context.quadraticCurveTo(170,50,50,100);
context.lineWidth = 13;
context.strokeStyle = "rgb(204,255,0)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(100,40);
context.lineTo(160,70);
context.lineWidth = 3;
context.strokeStyle = "rgb(196,0,255)";
context.stroke();
context.beginPath();
context.moveTo(110,20);
context.lineTo(170,40);
context.lineWidth = 3;
context.strokeStyle = "rgb(255,0,247)";
context.stroke();
context.beginPath();
context.moveTo(150,0);
context.quadraticCurveTo(250,100,300,0);
context.lineWidth = 13;
context.strokeStyle = "rgb(204,255,0)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(150,0);
context.quadraticCurveTo(350,100,400,0);
context.lineWidth = 3;
context.strokeStyle = "rgb(255,0,247)";
context.stroke();
context.closePath();
///////////////////// top of machine left
context.beginPath();
context.moveTo(50,110);
context.lineTo(100,50);
context.lineTo(0,50);
context.lineTo(0,110);
context.lineTo(50,110);
context.fillStyle ="rgb(77,87,218)";
context.fill();
context.lineWidth = 1;
context.strokeStyle ="rgb(40,9,128)";
context.stroke();
context.closePath();
///////////////// top left lines machine
context.beginPath();
context.moveTo(10,50);
context.lineTo(10,110);
context.lineWidth = 10;
context.strokeStyle = "rgb(40,9,128)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(43,50);
context.lineTo(43,110);
context.lineWidth = 10;
context.strokeStyle = "rgb(40,9,128)";
context.stroke();
context.closePath();
////////////// right machine
context.beginPath();
context.moveTo(800,500);
context.lineTo(685,500);
context.lineTo(620,600);
context.lineTo(800,600);
context.fillStyle = "rgb(77,87,218)";
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(693,710);
context.lineTo(693,500);
context.lineWidth = 10;
context.strokeStyle = "rgb(228,115,255)";
context.stroke();
context.beginPath();
context.moveTo(773,710);
context.lineTo(773,500);
context.lineWidth = 10;
context.strokeStyle = "rgb(228,115,255)";
context.stroke();
context.closePath();
//////////////////////////////
var machine = context.createLinearGradient(7,11, canvas.width, canvas.height);
machine.addColorStop(0.25, "rgb(48,228,180)");
machine.addColorStop(0.75, "rgb(195,249,247)");
machine.addColorStop(1, "rgb(0,188,255)");
context.beginPath()
context.moveTo(800,500);
context.lineTo(685,500);
context.lineTo(590,300);
context.lineTo(670,50);
context.lineTo(800,50);
context.lineTo(800,500);
context.lineWidth = 5;
context.fillStyle = machine;
context.fill();
context.strokeStyle = "rgb(20,252,221)";
context.stroke();
context.closePath();
////////////////////////// right top machine
context.beginPath();
context.moveTo(670,50);
context.lineTo(600,0);
context.lineTo(800,0);
context.lineTo(800,50);
context.lineTo(670,50);
context.fillStyle ="rgb(77,87,218)";
context.fill();
context.lineWidth = 1;
context.strokeStyle ="rgb(40,9,128)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(693,0);
context.lineTo(693,50);
context.lineWidth = 10;
context.strokeStyle = "rgb(228,115,255)";
context.stroke();
context.beginPath();
context.moveTo(773,0);
context.lineTo(773,50);
context.lineWidth = 10;
context.strokeStyle = "rgb(228,115,255)";
context.stroke();
context.closePath();
/////////////// wires
context.beginPath();
context.moveTo(600,0);
context.quadraticCurveTo(500,90,650,110);
context.lineWidth = 13;
context.strokeStyle = "rgb(204,255,0)";
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(600,0);
context.quadraticCurveTo(480,100,400,0);
context.lineWidth = 13;
context.strokeStyle = "rgb(204,255,0)";
context.stroke();
context.beginPath();
context.moveTo(600,40);
context.lineTo(560,80);
context.lineWidth = 3;
context.strokeStyle = "rgb(196,0,255)";
context.stroke();
context.beginPath();
context.moveTo(530,20);
context.lineTo(510,60);
context.lineWidth = 3;
context.strokeStyle = "rgb(255,0,247)";
context.stroke();
////////////////// DEEE DEEEE ///////////
///////////// dee dee's face
context.beginPath();
context.moveTo(105,285);
context.quadraticCurveTo(115,420,265,335);
context.quadraticCurveTo(300,295,305,320);
//context.quadraticCurveTo(400,510,250,320);
context.lineTo(310,310);
context.quadraticCurveTo(295,285,285,290);
context.lineTo(310,282);
context.lineTo(305,265);
context.quadraticCurveTo(250,295,275,255);
context.lineTo(295,225);
context.lineTo(245,245);
context.lineTo(225,195);
context.lineTo(100,205);
context.lineTo(105,285);
context.fillStyle = "rgb(250,214,203)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
context.closePath();
/////////// dee dee's hair 1
context.beginPath();
context.moveTo(175,265);
context.quadraticCurveTo(195,225,175,200);
context.lineTo(95,200);
context.lineTo(100,300);
context.lineTo(120,340);
context.quadraticCurveTo(155,345,175,310);
context.quadraticCurveTo(115,245,175,265);
context.fillStyle = "rgb(255,212,71)";
context.fill();
//context.strokeStyle = "black";
//context.stroke();
context.closePath();
/////// dee dee's hair 2
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 46;
context.beginPath();
context.arc(92, 240, radius, 0, 2 * Math.PI, false);
context.fillStyle = "rgb(255,212,71)";
context.fill();
context.closePath();
/////////////// deee deee's hair 3
context.beginPath();
context.moveTo(80,255);
context.lineTo(15,270);
context.lineTo(65,210);
context.fillStyle = "rgb(255,212,71)";
context.fill();
//context.strokeStyle = "black";
//context.stroke();
context.closePath();
////////// dee dee's eye
context.beginPath();
context.moveTo(195,255);
context.quadraticCurveTo(195,155,235,257);
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();
context.closePath();
///////////////////////dee dee's eye lash 1
context.beginPath();
context.moveTo(145,210);
context.lineTo(195,240);
context.strokeStyle = "black";
context.stroke();
context.closePath();
//////////////////////// dee dee's eye lash 2
context.beginPath();
context.moveTo(150,178);
context.lineTo(197,223);
context.strokeStyle = "black";
context.stroke();
context.closePath();
/////////////////////// dee dee's eye lash 3
context.beginPath();
context.moveTo(175,175);
context.lineTo(200,207);
context.strokeStyle = "black";
context.stroke();
context.closePath();
////////////////////////// dee dees shirt 2
context.beginPath
context.moveTo(170,380);
context.quadraticCurveTo(200,415,215,380);
context.lineTo(170,380);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
//////////////// dee dee's shirt 1
context.beginPath();
context.moveTo(205,380);
context.lineTo(210,360);
context.lineTo(190,365);
context.lineTo(185,385);
context.lineTo(205,380);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.closePath();
//////////////// dee dee's arm 1
context.beginPath();
context.moveTo(190,365);
context.lineTo(105,390);
context.stroke();
context.closePath();
////////////////// dee dee's arm 2
context.beginPath();
context.moveTo(200,363);
context.lineTo(100,410);
context.quadraticCurveTo(105,410,105,445);
context.quadraticCurveTo(105,460,85,420);
context.quadraticCurveTo(35,465,45,455);
context.quadraticCurveTo(45,435,75,410);
context.quadraticCurveTo(-15,390,85,390);
context.quadraticCurveTo(60,335,105,390);
context.fillStyle = "rgb(250,214,203)";
context.fill();
context.stroke();
context.closePath();
////////////////// dee dee's WHITE leg 1
context.beginPath();
context.moveTo(190,395);
context.lineTo(220,500);
context.lineTo(230,500);
context.lineTo(200,396);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();
//////////////// dee dee's WHITE leg 2
context.beginPath();
context.moveTo(200,395);
context.lineTo(230,500);
context.lineTo(238,500);
context.lineTo(207,392);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();
/////////////////// dee dee's pink sock 1
context.beginPath();
context.moveTo(212,470);
context.lineTo(215,480);
context.lineTo(225,480);
context.lineTo(222,470);
context.lineTo(210,470);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.stroke();
context.closePath();
/////////////// dee dee's pink sock 2
context.beginPath();
context.moveTo(218,490);
context.lineTo(220,500);
context.lineTo(230,500);
context.lineTo(227,490);
context.lineTo(218,490);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.stroke();
context.closePath();
//////////////////// dee dee's pink sock 3
context.beginPath();
context.moveTo(222,470);
context.lineTo(226,480);
context.lineTo(232,480);
context.lineTo(228,470);
context.lineTo(220,470);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.stroke();
context.closePath();
/////////////// dee dee's shoe 1
context.beginPath();
context.moveTo(280,475);
context.quadraticCurveTo(420,440,240,540);
context.lineTo(240,520);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.stroke();
context.closePath();
///////////////////// dee dee's shoe 2
context.beginPath();
context.moveTo(220,500);
context.quadraticCurveTo(385,410,220,550);
context.lineTo(220,500);
context.fillStyle = "rgb(255,127,196)";
context.fill();
context.stroke();
context.closePath();
//////////////////// bubble gum
context.beginPath();
context.moveTo(320,305);
context.lineTo(290,290);
context.lineTo(320,280);
context.fillStyle = "rgb(250,228,228)";
context.fill();
context.stroke();
context.closePath();
/////////// bubble gum 2
context.beginPath();
context.moveTo(320,280);
context.lineTo(290,290);
context.fillStyle = "rgb(250,228,228)";
context.fill();
context.stroke();
context.closePath();
/////////////////////////// bubble gum 3
var gum = context.createLinearGradient(6,14,canvas.width,canvas.height);
gum.addColorStop(1,"rgb(255,153,153)");
gum.addColorStop(0.25,"rgb(255,204,204)");
gum.addColorStop(0.5,"rgb(250,228,228)");
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 210;
context.beginPath();
context.arc(520, 286, radius, 0, 2 * Math.PI, false);
context.fillStyle = gum;
context.fill();
context.closePath();
/////////// DEXTER ///////////////////////////////
/////// dexter's shirt and right arm
context.beginPath();
context.moveTo(420,325);
context.lineTo(390,370);
context.lineTo(530,380);
context.lineTo(530,330);
context.lineTo(600,310);
context.lineTo(600,295);
context.lineTo(530,315);
context.fillStyle = "white";
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
/////////// dexter's right hand
context.beginPath();
context.moveTo(595,290)
context. lineTo(595,320);
context.lineTo(605,310);
context.quadraticCurveTo(635,365,615,310);
context.quadraticCurveTo(662,320,618,300);
context.quadraticCurveTo(670,290,615,290);
context.quadraticCurveTo(605,250,605,290);
context.fillStyle = "purple";
context.fill();
context.lineTo(595,290);
context.stroke();
context.closePath();
////// dexters left arm
context.beginPath();
context.moveTo(435,325);
context.lineTo(365,260);
context.lineTo(365,275);
context.lineTo(410,315);
context.fillStyle = "white";
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
////////////////// dexter's left hand
context.beginPath();
context.moveTo(375,290);
context.lineTo(380,260);
context.lineTo(370,260);
context.quadraticCurveTo(360,220,360,265);
context.quadraticCurveTo(310,250,355,275);
context.quadraticCurveTo(300,285,355,285);
context.quadraticCurveTo(340,340,365,285);
context.fillStyle = "purple";
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
/////////////////// dex left hand
context.beginPath();
context.moveTo(376,290);
context.lineTo(365,285);
context.stroke();
///////////////// dexters face
context.beginPath();
context.moveTo(580,210);
context.lineTo(565,240);
context.quadraticCurveTo(595,245,575,278);
context.quadraticCurveTo(550,300,550,280);
context.lineTo(535,315);
context.lineTo(465,350);
context.quadraticCurveTo(390,345,390,250);
context.lineTo(435,180);
context.fillStyle = "rgb(255,241,225)";
context.fill();
context.stroke();
context.closePath();
///////////////////////// dexter's hair
context.beginPath();
context.moveTo(425,190);
context.quadraticCurveTo(392,155,445,150);
context.quadraticCurveTo(470,145,520,165);
context.quadraticCurveTo(550,180,580,210);
context.lineTo(540,220);
context.quadraticCurveTo(454,225,425,190);
context.fillStyle = "rgb(250,137,8)";
context.fill();
context.lineWidth = 3;
context.stroke();
context.closePath();
///////////// dexters flyaway hair 1
context.beginPath();
context.moveTo(580,210);
context.lineTo(605,190);
context.lineWidth = 2;
context.stroke();
context.closePath();
///////////////// dexters flyaway hair 2
context.beginPath();
context.moveTo(580,210);
context.lineTo(610,205);
context.lineWidth = 2;
context.stroke();
context.closePath();
/////////////////// dexters hair curl 1
context.beginPath();
context.moveTo(455,210);
context.quadraticCurveTo(465,160,445,208);
context.lineWidth = 2;
context.stroke();
context.closePath();
////////////////////// dexters hair curl 2
context.beginPath();
context.moveTo(493,220);
context.quadraticCurveTo(495,166,505,220);
context.lineWidth = 2;
context.stroke();
context.closePath();
///////////////// dexter's left eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 45;
var centerY = -35;
var radius = 25;
// save state
context.save();
// translate context
context.translate(700 / 2, 550 / 2);
context.rotate(Math.PI*.15);
// scale context horizontally
context.scale(1,2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = "rgb(48,205,253)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
//////////////////// dexter's left pupil
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 30;
var centerY = -7;
var radius = 3;
// save state
context.save();
// translate context
context.translate(720 / 2, 550 / 2);
context.rotate(Math.PI*.15);
// scale context horizontally
context.scale(1,9);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
/////////////////glasses middle
context.beginPath();
context.moveTo(452,235);
context.lineTo(436,265);
context.lineTo(445,270);
context.lineTo(455,235);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
///////////// dexter's mouth red
context.beginPath();
context.moveTo(435,323);
context.quadraticCurveTo(500,350,505,280);
context.fillStyle = "rgb(188,52,3)";
context.fill();
context.closePath();
/////////////// tooth 1
context.beginPath();
context.rect(440,270,25,33);
context.fillStyle = "white";
context.fill();
context.lineWidth =1;
context.stroke();
context.closePath();
////////// tooth 2
context.beginPath();
context.rect(465,270,25,33);
context.fillStyle = "white";
context.fill();
context.lineWidth =1;
context.stroke();
context.closePath();
////////////////// dexter nose
context.beginPath();
context.moveTo(425,245);
context.lineTo(456,270);
context.quadraticCurveTo(430,275,415,290);
context.lineTo(435,266);
context.lineTo(425,245);
context.fillStyle = "rgb(255,241,225)";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
context.beginPath();
//////////////////// dexters right eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 25;
var centerY = -24;
var radius = 23;
// save state
context.save();
// translate context
context.translate(860 / 2, 550 / 2);
context.rotate(Math.PI*.15);
// scale context horizontally
context.scale(1.5,2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = "rgb(48,205,253)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
///////////////////// right pupil
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 60;
var centerY = -8.5;
var radius = 3;
// save state
context.save();
// translate context
context.translate(720 / 2, 550 / 2);
context.rotate(Math.PI*.15);
// scale context horizontally
context.scale(1.5,9);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 5 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = "black";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
//////////////////// dexter's tongue
context.beginPath();
context.moveTo(435,325);
context.quadraticCurveTo(455,295,474,330);
context.fillStyle = "rgb(255,162,138)";
context.fill();
context.lineWidth = 1;
context.stroke();
context.closePath();
///////////////////////// dexter's mouth 1 LINE
context.beginPath();
context.moveTo(435,322);
context.quadraticCurveTo(500,350,505,280);
context.lineWidth = 1.5;
context.stroke();
context.closePath();
///////////////// dexter's mouth 2 LINE
context.beginPath();
context.moveTo(435,323);
context.lineTo(445,335);
context.stroke();
context.closePath();
///////////////// bottom of shirt
context.beginPath();
context.moveTo(390,370);
context.lineTo(530,380);
context.lineWidth = 3;
context.stroke();
context.closePath();
//////////////////// left shoe
context.beginPath();
context.moveTo(420,372);
context.lineTo(410,405);
context.lineTo(400,400);
context.quadraticCurveTo(410,370,390,395);
context.lineTo(355,370);
context.lineTo(395,370);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
////////////// right shoe
context.beginPath();
context.moveTo(500,377);
context.lineTo(510,409);
context.lineTo(520,408);
context.quadraticCurveTo(515,380,530,408);
context.lineTo(575,380);
context.lineTo(530,380);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();
////////////////// bubble 2
context.beginPath();
context.moveTo(585,110);
context.quadraticCurveTo(650,110,655,180);
context.quadraticCurveTo(630,130,585,110);
context.fillStyle = "white";
context.fill();
context.lineWidth = 1;
context.stroke();
//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
</script>
</body>
</html>
No comments:
Post a Comment