Gabija's Blog: Not Final

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//////////////////////////////////////sky//////////

var x = 0;
var y = 0;
var width = 800;
var height = 800;

context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = '#002255';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#002255';
context.stroke()

////////////////////////////////////////////////cloud//////////////

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.2;
var centerY = canvas.height / 3.6;
var radius = 76;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();

/////////////////////////////////////////////cloud2//////////////////

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 3.2;
var centerY = canvas.height / 3;
var radius = 78;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();

/////////////////////////////////////////////////////sun/////////////

var centerX = canvas.width / 6;
var centerY = canvas.height / 7;
var radius = 80;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFFFCC");
grd.addColorStop(1, "#FFFF99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFFF99";
context.stroke();

/////////////////////////////////////////////cloud3//////////////////

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 3.7;
var centerY = canvas.height / 3.5;
var radius = 78;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();

////////////////////////////////////////////////cloud4//////////////

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2.7;
var centerY = canvas.height / 4.4;
var radius = 76;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#E0E0E0";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "#E0E0E0";
context.stroke();

///////////////////////////////////////////////////hair

var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2.14;
var radius = 60;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#CC9944";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "CC9944";
context.stroke();

////////////////////////////////////////////////////MOREHAIR

context.beginPath();
context.rect(474, 270, 118, 210);
context.fillStyle = '#CC9944';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC9944';
context.stroke()

///////////////////////////////////////////////////////////TORSO

context.beginPath();
context.rect(474, 370, 120, 185);
context.fillStyle = '#FF007F';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'CC2266';
context.stroke()

////////////////////////////////////////////////////////////NECK///////

context.beginPath();
context.rect(507, 320, 53, 57);
context.fillStyle = '#FFCC99';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'FFCC99';
context.stroke()

/////////////////////////////////////////////////////face/////////////

var centerX = canvas.width / 1.5;
var centerY = canvas.height / 2;
var radius = 59;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#FFCC99");
grd.addColorStop(1, "#FFCC99");
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = "FFCC99";
context.stroke();

////////////////////////////////////////////////////////////EYE1

var centerX = canvas.width / 1.57;
var centerY = canvas.height / 2.1;
var radius = 9;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();

////////////////////////////////////////////////////////////EYE2

var centerX = canvas.width / 1.44;
var centerY = canvas.height / 2.1;
var radius = 9;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black";
context.stroke();

///////////////////////////////////////////////////////////Pupil1

var centerX = canvas.width / 1.44;
var centerY = canvas.height / 2.13;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#2B9EAB");
grd.addColorStop(1, "#2B9EAB");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

//////////////////////////////////////////////////////Pupil2

var centerX = canvas.width / 1.57;
var centerY = canvas.height / 2.13;
var radius = 4;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 50);
grd.addColorStop(0, "#2B9EAB");
grd.addColorStop(1, "#2B9EAB");
context.fillStyle = grd;
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

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

Gabija's Blog

Tuesday, February 12, 2013

Not Final

No comments:

Post a Comment