Digital Arts: HTML-desing project

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

////////////////////////////////////// start here

//background
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = "#B9D37A";
context.fill();
context.lineWidth = 4;
context.strokeStyle = "black"
context.stroke();

context.beginPath();
context.rect(23, 495, 46, 90);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.rect(80, 438, 90, 20);
context.fillStyle = "olive"
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black"
context.stroke();

context.beginPath();
context.rect(100, 486, 300, 200);
context.fillStyle = "light brown";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

//Lines
context.beginPath();
context.moveTo(0,0);
context.lineTo(46,139);
context.lineWidth = 3;
context.strokeStyle = "#EFA707";
context.stroke();

context.beginPath();
context.moveTo(0,0);
context.lineTo(334,500);
context.strokeStyle = "#EFA707";
context.stroke();

context.beginPath();
context.moveTo(0,0);
context.lineTo(147,148);
context.strokeStyle = "#EFA707";
context.stroke();

context.beginPath();
context.moveTo(0,0)
context.lineTo(334,187);
context.strokeStyle = "#EFA707";
context.stroke();

context.beginPath();
context.moveTo(0,0);
context.lineTo(538,148);
context.strokeStyle = "#EFA707";
context.stroke();

context.beginPath();
context.moveTo(0,0);
context.lineTo(502,55);
context.strokeStyle = "#EFA707";
context.stroke();

context.beginPath();
context.moveTo(164,570);
context.lineTo(376,570);
context.strokeStyle = "orange"
context.stroke();

context.beginPath();
context.moveTo(335,532);
context.lineTo(454,532);
context.strokeStyle = "black"
context.stroke();

context.beginPath();
context.moveTo(93,532);
context.lineTo(93,466);
context.strokeStyle = "gray"
context.stroke();

context.beginPath();
context.moveTo(129,395);
context.lineTo(247,395);
context.strokeStyle = "black"
context.stroke();

context.beginPath();
context.moveTo(118,300);
context.lineTo(187,300);
context.strokeStyle = "black"
context.stroke();

context.beginPath();
context.moveTo(247,395);
context.lineTo(360,287);
context.stroke();

context.beginPath();
context.moveTo(0,359);
context.lineTo(46,359);
context.stroke();

context.beginPath();
context.moveTo(46,359);
context.lineTo(105,287);
context.stroke();

context.beginPath();
context.moveTo(105,287);
context.lineTo(214,287);
context.stroke();

context.beginPath();
context.moveTo(780, 0);
context.quadraticCurveTo(288, 0, 587, 179);
context.lineWidth = 3;
// line color
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.moveTo(799, 0);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth = 3;
// line color
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.moveTo(800, 0);
context.quadraticCurveTo(288, 0, 608, 160);
context.lineWidth = 3;
// line color
context.strokeStyle = "black";
context.stroke();
//circles
context.beginPath();
context.arc(404, 223, 80, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(472, 160, 30, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(476, 206, 5, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(506, 230, 15, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(513, 140, 10, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(552, 189, 50, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(605, 167, 30, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(646, 219, 25, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(647, 213, 15, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(658, 170, 5, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(658, 170, 15, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "gray";
context.stroke();

context.beginPath();
context.arc(692, 211, 30, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(693, 230, 6, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(717, 241, 10, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(732, 273, 20, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(771, 275, 15, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(760, 244, 30, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(756, 294, 2, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(741, 308, 5, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(755, 320, 10, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(745, 305, 5, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(778, 344, 30, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(779, 322, 20, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(758, 367, 20, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(793, 380, 7, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(771, 424, 25, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(769, 433, 15, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(785, 468, 9, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(771, 525, 35, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(756, 484, 5, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(728, 521, 15, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(704, 553, 9, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(678, 534, 20, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(670, 563, 24, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(631, 574, 6, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(624, 597, 13, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(636, 571, 2, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(607, 580, 13, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(561, 590, 26, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(496, 592, 30, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(482, 570, 18, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(420, 561, 13, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(472, 518, 20, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(416, 517, 24, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(428, 476, 25, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(428, 476, 13, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(460, 461, 8, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "whtie";
context.stroke();

context.beginPath();
context.arc(407, 431, 30, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(452, 408, 20, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(429, 408, 14, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(421, 363, 25, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(444, 371, 8, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(474, 364, 6, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(468, 322, 20, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(458, 329, 14, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(503, 333, 17, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(538, 338, 7, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(548, 298, 13, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(584, 338, 7, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(633, 326, 13, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(634, 368, 19, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(643, 371, 10, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(657, 419, 10, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(621, 422, 5, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(653, 446, 7, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(630, 450, 9, 0, 2 * Math.PI, false);
context.fillStyle = "black";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(632, 473, 4, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(613, 468, 7, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(610, 484, 5, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(602, 493, 4, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(593, 477, 6, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(591, 487, 4, 0, 2 * Math.PI, false);
context.fillStyle = "orange";
context.fill();
context.lineWidth = 0.5;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(581, 484, 5, 0, 2 * Math.PI, false);
context.fillStyle = "gray";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();

context.beginPath();
context.arc(578, 491, 5, 0, 2 * Math.PI, false);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

context.beginPath();
context.arc(572, 494, 4, 0, 2 * Math.PI, false);
context.fillStyle = "olive";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "white";
context.stroke();

////////////////////////////////////// end here

};

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

Digital Arts

Tuesday, July 10, 2012

HTML-desing project

No comments:

Post a Comment

About Me