Sunday, November 15, 2015

Autoscopy Project


My autoscopy re-do

This shows more of my "anxiety" which is what this project was assigned for, to show our weakness. 
Therefore, I put more time and effort in this second attempt to show how it would be seen on the exterior if my thoughts were visible.




My first attempt for the autoscopy project.

I thought it was a cool idea at first, but I realized after Santiago's critique that this wasn't what I wanted to portray my weakness as. 

Thursday, October 29, 2015

Thursday, October 22, 2015

Mesh project

This mesh project was not my favorite. I had trouble color sampling the transparency of the perfume bottle, therefore it came out with a frosted hint.

Tuesday, September 29, 2015

final canvas



<!DOCTYPE HTML>
<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>