Tuesday, February 18, 2014

Final portrait Feb 18th, 2014.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

////////////////////////////SKY///////////////

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 200;
     
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(800, 150, 800, 0);
        // STARTING COLOR
        grd.addColorStop(0, "#FF3300");
        // INTERMEDIATE COLOR
        grd.addColorStop(0.5, "#990000");
        // ENDING COLOR
        grd.addColorStop(1, "#660066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();

//////////////////////SEA/////////////

        var x = 0;
        var y = 200;
        var width = 800;
        var height = 100;
     
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(400, 200, 400, 300);
        // STARTING COLOR
        grd.addColorStop(1, "#00CCFF");
        // ENDING COLOR
        grd.addColorStop(0.25, "#000066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();
     
/////////////////////SAND/////////////

        context.beginPath();
        context.rect(0, 300, 800, 600);
        context.fillStyle = "#FFCC99";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFCC99";
        context.stroke();
        context.closePath();

//////////////////SUN/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 150;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(160, 200, radius, startangle, endangle, true);
        context.fillStyle = "#FF6600";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FF6600";
        context.stroke();
        context.closePath();
     
///////////////////MIDDLE-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 35;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(535, 110, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(535, 110, 5, 535, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
//////////////////BOTTOM-LEFT-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(500, 120, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
/////////////////////////MIDDLE-LEFT-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 90, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(470, 90, 5, 520, 110, 54);
        // STARTING COLOR
        grd.addColorStop(0.15, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.55, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

///////////////TOP-LEFT-CLOUD/////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(515, 60, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(515, 60, 5, 520, 80, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
/////////////MIDDLE-BOTTOM-CLOUD////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(570, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(570, 120, 5, 520, 80, 270);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
//////////////RIGHT-BOTTOM-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(600, 105, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(600, 105, 5, 520, 80, 275);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(1, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

//////////////HEAD//////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 45;

        context.beginPath();
        context.arc(500, 350, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();

////////////HAIR/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 42;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(500, 335, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////MOUTH///////////////

   var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 10;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 381, radius, startangle, endangle, true);
        context.fillStyle = "black";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
        context.closePath();
     
///////////////LEFT-NOSE///////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(496, 371, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////////RIGHT-NOSE/////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(505, 371, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////////LEFT-EYE///////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7;

        context.beginPath();
        context.arc(479, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.closePath();

////////////RIGHT-EYE///////////////////


  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7;

        context.beginPath();
        context.arc(520, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.closePath();
     
/////////////LEFT-PUPIL//////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;

        context.beginPath();
        context.arc(479, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////RIGHT-PUPIL//////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;

        context.beginPath();
        context.arc(520, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
////////////LEFT-EYEBROW////////////////

  var x = 469;
  var y = 342;
  var x1 = 491;
  var y1 = y;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
  context.closePath();

///////////////RIGHT-EYEBROW///////////////

  var x = 510;
  var y = 342;
  var x1 = 532;
  var y1 = y;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
  context.closePath();
 
///////////NECK///////////////////////

  var x = 500;
  var y = 396;
  var x1 = 500;
  var y1 = 410;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 22;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
////////////TORSO//////////////

  var x = 500;
  var y = 410;
  var x1 = 500;
  var y1 = 485;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
     
///////////////SWIM-SUIT////////////////

  var x = 500;
  var y = 485;
  var x1 = 500;
  var y1 = 515;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#FF0000";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#FF0000";
  context.stroke();
  context.closePath();
 
//////////////LEFT-LEG//////////////

  var x = 473;
  var y = 515;
  var x1 = 473;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
/////////////RIGHT-LEG////////////////

  var x = 527;
  var y = 515;
  var x1 = 527;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
////////////////LEF-FOOT/////////////////

  var x = 485.5;
  var y = 575;
  var x1 = 444;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 20;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7.5;

        context.beginPath();
        context.arc(444, 575, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();
 

///////////////RIGHT-FOOT///////////////

  var x = 514.5;
  var y = 575;
  var x1 = 556;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 20;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7.5;

        context.beginPath();
        context.arc(556, 575, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();
 
////////////////ARMS///////////////

var x = 400;
  var y = 350;
  var x1 = 500;
  var y1 = 450;
  var x2 = 600;
  var y2 = 350;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineWidth = 20;
  context.strokeStyle = "#993300";
  context.lineCap = "round";
  context.stroke();
  context.closePath();
 
////////////LEFT-NIPPLE/////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 0.5;

        context.beginPath();
        context.arc(480, 435, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
///////////////RIGHT-NIPPLE/////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 0.5;

        context.beginPath();
        context.arc(520, 435, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();

/////////////SURFBOARD/////////////

  var x = 160;
  var y = 310;
  var x1 = 160;
  var y1 = 530;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#006600";
        context.fill();
        context.lineWidth = 120;
        context.strokeStyle = "#006600";
  context.stroke();
  context.closePath();
 
////////////SURFBOARD//////////
 
  var x = 160;
  var y = 260;
  var x1 = 160;
  var y1 = 580;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 20;
        context.strokeStyle = "#000000";
  context.stroke();
  context.closePath();

/////////////TOWEL//////////////

context.beginPath();
context.rect(615, 340, 180, 250);
context.fillStyle = "#330066";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#0066CC";
context.stroke();
context.closePath();

///////////CAMERA/////////////

context.beginPath();
context.rect(670, 410, 70, 40);
context.fillStyle = "#000000";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#000000";
context.stroke();
context.closePath();

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 16;

        context.beginPath();
        context.arc(696, 430, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#CCFFFF";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#99CCCC";
        context.stroke();
        context.closePath();

context.beginPath();
context.rect(720, 414, 16, 8);
context.fillStyle = "#CCCCCC";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#CCCCCC";
context.stroke();
context.closePath();

//////////RADIO//////////

var x = 290;
  var y = 470;
  var x1 = 340;
  var y1 = 470;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#333333";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#333333";
  context.stroke();
  context.closePath();

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 25;

        context.beginPath();
        context.arc(285, 471, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 25;

        context.beginPath();
        context.arc(345, 471, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
var x = 362;
var y = 380;
var x1 = 350;
var y1 = 430;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
context.closePath();

context.beginPath();
context.rect(309, 439, 15, 4);
context.fillStyle = "#FF0000";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#FF0000";
context.stroke();
context.closePath();

////////////BIRDS////////////////

var x = 150;
  var y = 130;
  var x1 = 180;
  var y1 = 160;
  var x2 = 210;
  var y2 = 130;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineWidth = 2;
  context.strokeStyle = 'black';
  context.lineCap = "round";
  context.stroke();
 
 


     
////////////////////////////////////////////////////
   
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="800" height="600"></canvas>
  </body>
</html>



Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)