Thursday, February 13, 2014

progress Feb 13, 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, 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();

///////////////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, 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();
       
//////////////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, 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();

//////////////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();

////////////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();
       
///////////////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 = 575;
var y = 400;
var x1 = 575;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 70;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();


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

var x = 575;
var y = 400;
var x1 = 575;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 70;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();




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

var x = 180;
var y = 400;
var x1 = 400;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#FFCC33";
        context.fill();
        context.lineWidth = 120;
        context.strokeStyle = "#FFCC33";
context.stroke();
context.closePath();



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

    </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)