Francesca DeVito Art 210 Blog

For this project, I created a picture of a palm tree with a sun and a blue background.

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

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

//Background
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = 'lightblue'
context.fill();
context.stroke();

//Sun
context.beginPath();
context.arc(500, 130, 100, 0, 2*Math.PI, false);
var grd = context.createRadialGradient(500, 130, 30, 500, 130, 100);
grd.addColorStop(0, 'white');
grd.addColorStop(1, 'yellow');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'lightyellow';
context.stroke();

//Palm Tree Leaves
context.beginPath();
context.moveTo(405, 150);
context.bezierCurveTo(405, 150, 350, 50, 305, 110);
context.lineTo(345, 109);
context.lineTo(330, 117);
context.lineTo(345, 126);
context.lineTo(365, 124);
context.lineTo(357, 130);
context.lineTo(375, 135);
context.lineTo(385, 130);
context.lineTo(380, 140);
context.lineTo(389, 153);
context.bezierCurveTo(389, 153, 280, 75, 226, 195);
context.lineTo(260, 178);
context.lineTo(285, 150);
context.lineTo(278, 178);
context.lineTo(312, 170);
context.lineTo(328, 145);
context.lineTo(318, 170);
context.lineTo(365, 150);
context.lineTo(355, 163);
context.lineTo(370, 167);
context.bezierCurveTo(370, 167, 250, 175, 252, 330);
context.quadraticCurveTo(265, 275, 274, 310);
context.quadraticCurveTo(285, 225, 290, 240);
context.lineTo(295, 280);
context.lineTo(323, 230);
context.quadraticCurveTo(327, 175, 330, 200);
context.lineTo(335, 225);
context.quadraticCurveTo(374, 175, 400, 180);
context.lineTo(420, 230);
context.lineTo(440, 224);
context.quadraticCurveTo(441, 260, 430, 250);
context.lineTo(436, 288);
context.lineTo(453, 253);
context.quadraticCurveTo(470, 275, 441, 300);
context.lineTo(445, 347);
context.bezierCurveTo(445, 347, 525, 275, 427, 185);
context.lineTo(473, 223);
context.lineTo(474, 205);
context.lineTo(484, 235);
context.lineTo(510, 250);
context.lineTo(505, 220);
context.lineTo(528, 265);
context.lineTo(538, 278);
context.lineTo(545, 241);
context.lineTo(543, 295);
context.lineTo(555, 325);
context.bezierCurveTo(555, 325, 610, 150, 427, 160);
context.lineTo(465, 155);
context.lineTo(465, 135);
context.lineTo(485, 160);
context.lineTo(498, 162);
context.lineTo(498, 141);
context.lineTo(508, 167);
context.lineTo(520, 174);
context.quadraticCurveTo(520, 145, 506, 120);
context.quadraticCurveTo(506, 100, 420, 140);
context.quadraticCurveTo(425, 125, 400, 125);
context.lineTo(405, 150);
context.fillStyle = 'green'
context.fill();
context.strokeStyle = 'black';
context.stroke();

//Tree Trunk
context.beginPath();
context.moveTo(385, 181);
context.bezierCurveTo(385, 181, 290, 300, 275, 545);
context.quadraticCurveTo(318, 575, 345, 540);
context.bezierCurveTo(345, 540, 345, 300, 405, 195);
context.lineTo(400, 180);
context.lineTo(385, 181);
context.fillStyle = 'rgb(99, 66, 33)';
context.fill();
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 1
context.beginPath();
context.moveTo(366, 210);
context.lineTo(383, 207);
context.lineTo(390, 215);
context.lineTo(394, 214);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 2
context.beginPath();
context.moveTo(356, 230);
context.lineTo(364, 227);
context.lineTo(374, 240);
context.lineTo(382, 230);
context.lineTo(387, 237);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 3
context.beginPath();
context.moveTo(345, 252);
context.lineTo(356, 250);
context.lineTo(358, 255);
context.lineTo(368, 252);
context.lineTo(371, 257);
context.lineTo(375, 254);
context.lineTo(377, 257);
context.lineTo(380, 256);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 4
context.beginPath();
context.moveTo(334, 276);
context.lineTo(351, 276);
context.lineTo(350, 281);
context.lineTo(360, 278);
context.lineTo(362, 282);
context.lineTo(368, 280);
context.lineTo(372, 282);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 5
context.beginPath();
context.moveTo(325, 300);
context.lineTo(334, 302);
context.quadraticCurveTo(339, 320, 348, 305);
context.quadraticCurveTo(350, 315, 360, 316);
context.lineTo(364, 320);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 6
context.beginPath();
context.moveTo(316, 325);
context.lineTo(325, 325);
context.quadraticCurveTo(325, 350, 338, 323);
context.lineTo(341, 333);
context.lineTo(352, 330);
context.lineTo(362, 333);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 7
context.beginPath();
context.moveTo(308, 350);
context.lineTo(326, 347);
context.lineTo(330, 355);
context.lineTo(341, 347);
context.lineTo(345, 355);
context.lineTo(360, 350);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 8
context.beginPath();
context.moveTo(300, 375);
context.lineTo(310, 375);
context.lineTo(317, 380);
context.lineTo(325, 375);
context.lineTo(337, 384);
context.lineTo(347, 375);
context.lineTo(354, 384);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 9
context.beginPath();
context.moveTo(294, 403);
context.lineTo(305, 401);
context.lineTo(308, 407);
context.lineTo(315, 401);
context.lineTo(323, 418);
context.lineTo(335, 401);
context.lineTo(339, 412);
context.lineTo(353, 404);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 10
context.beginPath();
context.moveTo(289, 430);
context.lineTo(304, 427);
context.lineTo(310, 438);
context.lineTo(312, 424);
context.lineTo(320, 438);
context.lineTo(327, 429);
context.lineTo(336, 439);
context.lineTo(348, 439);
context.strokeStyle = 'black';
context.stroke();

//Line on Tree Trunk 11
context.beginPath();
context.moveTo(282, 473)
context.lineTo(292, 470);
context.lineTo(298, 475);
context.lineTo(312, 468);
context.lineTo(315, 475);
context.lineTo(329, 466);
context.lineTo(332, 475);
context.quadraticCurveTo(340, 465, 346, 476);
context.strokeStyle = 'black'
context.stroke();

//Line on Tree Trunk 12
context.beginPath();
context.moveTo(279, 510);
context.lineTo(291, 505);
context.lineTo(294, 510);
context.quadraticCurveTo(300, 505, 310, 506);
context.lineTo(323, 501);
context.lineTo(326, 507);
context.lineTo(346, 505);
context.strokeStyle = 'black';
context.stroke();

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

};

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