Tuesday, July 30, 2013
Thursday, July 25, 2013
Tuesday, July 16, 2013
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start here
//background
//sky
context.beginPath();
context.rect(0, 0, 800, 300);
var grd = context.createLinearGradient(0,0, 800, 600);
grd.addColorStop(0, '#FE2E2E');
grd.addColorStop(.35, '#8ED6FF');
context.fillStyle = grd;
context.fill();
context.closePath();
//////////////////////////////////////////////////
//dolphin
context.beginPath();
context.moveTo(420,315);
context.bezierCurveTo(450,250, 490,230, 495,255);
context.quadraticCurveTo(510,250, 510,260);
context.quadraticCurveTo(450,270, 420,330);
context.lineTo(410,320);
context.lineTo(420,315);
context.fillStyle = '#BDBDBD';
context.fill();
context.beginPath();
context.moveTo(440,300);
context.quadraticCurveTo(450,275, 475,272);
context.fillStyle = '#D8D8D8';
context.fill();
context.beginPath();
context.moveTo(475,271);
context.quadraticCurveTo(470,277, 470,287);
context.quadraticCurveTo(475,277, 485,267);
context.fillStyle = '#BDBDBD';
context.fill();
context.beginPath();
context.moveTo(475,271);
context.quadraticCurveTo(475,277, 480,283);
context.quadraticCurveTo(480,277, 485,267);
context.fillStyle = '#BDBDBD';
context.fill();
context.beginPath();
context.moveTo(463,255);
context.quadraticCurveTo(438,255, 438,270);
context.quadraticCurveTo(453,260, 453,270);
context.fillStyle = '#BDBDBD';
context.fill();
/////////////////////////////////////////////////
//water
context.beginPath();
context.rect(0, 300, 800, 300);
var grd = context.createLinearGradient(0,800, 0, 0);
grd.addColorStop(.25, '#EFF8FB');
grd.addColorStop(1, '#00BFFF');
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////////////////////////////////////
//beach
//left
context.beginPath();
context.moveTo(0, 340);
context.lineTo(50, 340);
context.lineTo(75, 350);
context.quadraticCurveTo(50, 500, 150, 600);
context.lineJoin = 'bevel';
context.lineTo(0, 600);
context.lineTo(0, 340);
context.fillStyle = '#EFF8FB';
context.fill();
context.closePath();
//right
context.beginPath();
context.moveTo(800, 340);
context.lineTo(750, 340);
context.lineTo(725, 350);
context.quadraticCurveTo(750, 500, 650, 600);
context.lineJoin = 'bevel';
context.lineTo(800, 600);
context.lineTo(800, 340);
context.fillStyle = '#EFF8FB';
context.fill();
//////////////////////////////////////////////////
//sun
context.beginPath();
context.arc(200, 100, 75, 0, 6.3, false);
var grd = context.createRadialGradient(200,100,50,200,100,150);
grd.addColorStop(1, '#FF0000');
grd.addColorStop(0, '#F7FE2E');
grd.addColorStop(.25, '#FF4000');
context.fillStyle = grd;
context.fill();
/////////////////////////////////////////////////////
//Boat
context.beginPath();
context.moveTo(175, 270);
context.lineTo(200, 300);
context.lineTo(300, 300);
context.lineTo(325, 260);
context.lineTo(175, 270);
context.lineJoin = 'bevel';
context.fillStyle = '#EFF8FB';
context.fill();
//sails
context.beginPath();
context.moveTo(200, 260);
context.lineTo(250, 150);
context.lineTo(300, 250);
context.lineTo(200, 260);
context.lineJoin = 'bevel';
var grd = context.createLinearGradient(0,0, 800, 600);
grd.addColorStop(.25, '#FF0000');
grd.addColorStop(.5, '#0D00FF');
context.fillStyle = grd;
context.fill();
//front
context.beginPath();
context.moveTo(250, 150);
context.quadraticCurveTo(350, 180, 300, 250);
context.lineJoin = 'bevel';
context.fillStyle = '#EFF8FB';
context.fill();
context.beginPath();
context.moveTo(250, 150);
context.lineTo(250, 150);
context.quadraticCurveTo(300, 200, 300, 250);
context.lineJoin = 'bevel';
context.fillStyle = '#8ED6FF';
context.fill();
//mast
context.beginPath();
context.moveTo(250, 150);
context.lineTo (250,265);
context.strokeStyle = 'light_gray';
context.stroke();
//boom
context.beginPath();
context.moveTo(200, 260);
context.lineTo (300, 250);
context.strokeStyle = 'light_gray';
context.stroke();
//edge
context.beginPath();
context.moveTo(175, 270);
context.lineTo (325, 260);
context.strokeStyle = 'light_gray';
context.stroke();
//////////////////////////////////////////////////
//starfish
context.beginPath();
context.moveTo(710, 540);
context.bezierCurveTo(700,530, 740, 480, 725, 470);
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
context.beginPath();
context.moveTo(760, 500);
context.bezierCurveTo(690,490, 750, 510, 680, 500);
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
context.beginPath();
context.moveTo(700, 480);
context.bezierCurveTo(710,475, 725,525 ,750, 530);
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
///////////////////////////////////////////////////
//tree left
//coconut
context.beginPath();
context.arc(70, 185, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//trunk
context.beginPath();
context.moveTo(75, 175);
context.quadraticCurveTo(25, 290, 25, 450);
context.lineTo(0, 450);
context.lineTo(0, 400);
context.lineTo(10, 375);
context.lineTo(0, 390);
context.lineTo(15, 340);
context.lineTo(5, 350);
context.lineTo(20, 310);
context.lineTo(10, 320);
context.lineTo(30, 270);
context.lineTo(35, 260);
context.lineTo(25, 270);
context.lineTo(45, 230);
context.lineTo(30, 240);
context.lineTo(75, 175);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#424242';
context.fill();
//coconuts
context.beginPath();
context.arc(10, 445, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(25, 450, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(80, 180, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(60, 180, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(65, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(75, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//leaves
//1
context.beginPath();
context.moveTo(75, 170);
context.lineTo(95,200);
context.quadraticCurveTo(90,185, 100,180);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(90,185);
context.lineTo(110,210);
context.quadraticCurveTo(110,200, 120,195);
context.lineTo(97,185);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(110,200);
context.lineTo(130,230);
context.quadraticCurveTo(130,220, 145,205);
context.lineTo(118,200);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(130, 220);
context.lineTo(150, 255);
context.quadraticCurveTo(155, 245, 170, 235);
context.lineTo(135, 210);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(155,245);
context.lineTo(155, 280);
context.quadraticCurveTo(170,275, 180,280);
context.lineTo(160,235);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(165,275);
context.lineTo(155, 320);
context.quadraticCurveTo(170,310, 180,320);
context.lineTo(175,275);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(165,315);
context.lineTo(170, 330);
context.lineTo(180,315);
context.fillStyle = 'green';
context.fill();
//2
context.beginPath();
context.moveTo(75, 170);
context.lineTo(100,175);
context.quadraticCurveTo(95,160, 100,150);
context.lineTo(75, 170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(95,165);
context.lineTo(130,170);
context.quadraticCurveTo(125,155, 130,145);
context.lineTo(95,160);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(125,160);
context.lineTo(155,170);
context.quadraticCurveTo(150,160, 155,145);
context.lineTo(125,150);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(150,160);
context.lineTo(180,180);
context.quadraticCurveTo(175,160, 185,150);
context.lineTo(150,155);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(178,170);
context.lineTo(205,195);
context.quadraticCurveTo(205,175, 220,160);
context.lineTo(178,160);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(205,180);
context.lineTo(227,180);
context.lineTo(210,165);
context.fillStyle = 'green';
context.fill();
//3
context.beginPath();
context.moveTo(75, 170);
context.lineTo(100,145);
context.quadraticCurveTo(85,145, 80,130);
context.lineTo(75, 170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(92,145);
context.lineTo(115,120);
context.quadraticCurveTo(100,120, 90,110);
context.lineTo(85,140);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(105,120);
context.lineTo(130,100);
context.quadraticCurveTo(120,100, 110,85);
context.lineTo(95,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(120,100);
context.lineTo(150,90);
context.quadraticCurveTo(140,75, 135,55);
context.lineTo(110,95);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(140,80);
context.lineTo(170,77);
context.quadraticCurveTo(165,60,170,45);
context.lineTo(135,65);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(165,65);
context.lineTo(205,75);
context.quadraticCurveTo(200,55,205,35);
context.lineTo(165,55);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(200,70);
context.lineTo(225,55);
context.lineTo(200,50);
context.fillStyle = 'green';
context.fill();
//4
context.beginPath();
context.moveTo(75,170);
context.lineTo(75,125);
context.quadraticCurveTo(60,135,50,140);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(65,135);
context.lineTo(60,95);
context.quadraticCurveTo(50,110,40,110);
context.lineTo(60,140);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(55,105);
context.lineTo(45,55);
context.quadraticCurveTo(35,76,20,90);
context.lineTo(45,110);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(40,65);
context.lineTo(25,35);
context.quadraticCurveTo(15,50,0,55);
context.lineTo(30,85);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(20,45);
context.lineTo(0,20);
context.lineTo(0,50);
context.lineTo(5,55);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(75,170);
context.lineTo(45,145);
context.quadraticCurveTo(45,155,35,160);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(45,150);
context.lineTo(30,130);
context.quadraticCurveTo(25,145,20,155);
context.lineTo(40,160);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(35,140);
context.lineTo(0,120);
context.lineTo(0,150);
context.lineTo(25,150);
context.fillStyle = 'green';
context.fill();
//6
context.beginPath();
context.moveTo(75,170);
context.lineTo(40,175);
context.quadraticCurveTo(55,180,55,205);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(50,180);
context.lineTo(20,195);
context.quadraticCurveTo(35,200,45,225);
context.lineTo(55,195);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(35,195);
context.lineTo(5,220);
context.quadraticCurveTo(20,225,30,240);
context.lineTo(40,210);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(15,225);
context.lineTo(0,235);
context.lineTo(0,260);
context.lineTo(15,265);
context.lineTo(25,230);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(0,260);
context.lineTo(0,280);
context.lineTo(10,260);
context.fillStyle = 'green';
context.fill();
//////////////////////////////////////////////////
//tree right
//coconut in water
context.beginPath();
context.arc(650, 400, 10, 2.36, .785, false);
context.fillStyle = 'rgba(97,33,11,.70)';
context.fill();
//trunk
context.beginPath();
context.moveTo(675, 125);
context.quadraticCurveTo(765, 290, 750, 350);
context.lineTo(790, 350);
context.lineTo(770, 320);
context.lineTo(780, 325);
context.lineTo(750, 275);
context.lineTo(760, 280);
context.lineTo(740, 240);
context.lineTo(752, 250);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#424242';
context.fill();
//coconuts
context.beginPath();
context.arc(670, 125, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(65, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(75, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//leaves
//1
context.beginPath();
context.moveTo(675,125);
context.lineTo(640,130);
context.quadraticCurveTo(650,140,655,155);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(650,135);
context.lineTo(610,150);
context.quadraticCurveTo(625,160,630,175);
context.lineTo(655,145);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(620,155);
context.lineTo(580,190);
context.quadraticCurveTo(605,195,625,200);
context.lineTo(630,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(590,190);
context.lineTo(565,225);
context.quadraticCurveTo(580,220,605,235);
context.lineTo(620,195);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(575,220);
context.lineTo(575,250);
context.lineTo(600,220);
context.fillStyle = 'green';
context.fill();
//2
context.beginPath();
context.moveTo(675,125);
context.lineTo(645,95);
context.quadraticCurveTo(645,105,635,125);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(645,100);
context.lineTo(620,95);
context.quadraticCurveTo(625,105,620,125);
context.lineTo(645,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(625,100);
context.lineTo(590,95);
context.quadraticCurveTo(600,105,590,125);
context.lineTo(625,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(595,100);
context.lineTo(570,95);
context.quadraticCurveTo(580,105,575,125);
context.lineTo(605,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(575,100);
context.lineTo(545,100);
context.quadraticCurveTo(550,115,555,135);
context.lineTo(580,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(550,105);
context.lineTo(520,110);
context.quadraticCurveTo(540,125,545,145);
context.lineTo(555,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(530,115);
context.lineTo(520,140);
context.lineTo(545,135);
context.fillStyle = 'green';
context.fill();
//3
context.beginPath();
context.moveTo(675,125);
context.lineTo(670,75);
context.quadraticCurveTo(665,90,645,90);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(665,95);
context.lineTo(635,75);
context.quadraticCurveTo(650,65,655,50);
context.lineTo(670,95);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(650,60);
context.lineTo(640,40);
context.quadraticCurveTo(640,50,625,55);
context.lineTo(645,75);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(640,50);
context.lineTo(620,15);
context.quadraticCurveTo(620,30,600,45);
context.lineTo(635,55);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(620,25);
context.lineTo(580,15);
context.quadraticCurveTo(595,25,580,40);
context.lineTo(610,40);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(590,20);
context.lineTo(565,20);
context.lineTo(590,30);
context.fillStyle = 'green';
context.fill();
//4
context.beginPath();
context.moveTo(675,125);
context.lineTo(705,100);
context.quadraticCurveTo(690,95,680,80);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(695,100);
context.lineTo(720,75);
context.quadraticCurveTo(700,75,695,55);
context.lineTo(680,95);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(710,75);
context.lineTo(740,60);
context.quadraticCurveTo(720,50,705,35);
context.lineTo(690,110);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(730,55);
context.lineTo(765,45);
context.quadraticCurveTo(745,30,735,10);
context.lineTo(710,50);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(750,35);
context.lineTo(780,40);
context.quadraticCurveTo(775,25,780,5);
context.lineTo(740,20);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(775,30);
context.lineTo(795,25);
context.lineTo(775,20);
context.fillStyle = 'green';
context.fill();
//5
context.beginPath();
context.moveTo(675,125);
context.lineTo(705,130);
context.quadraticCurveTo(700,120,705,105);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(700,125);
context.lineTo(725,130);
context.quadraticCurveTo(720,120,725,100);
context.lineTo(700,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(720,125);
context.lineTo(745,130);
context.quadraticCurveTo(740,120,745,100);
context.lineTo(720,110);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(740,125);
context.lineTo(770,135);
context.quadraticCurveTo(765,120,770,100);
context.lineTo(740,105);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(765,130);
context.lineTo(790,145);
context.quadraticCurveTo(785,125,795,110);
context.lineTo(765,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(780,130);
context.lineTo(800,135);
context.lineTo(800,120);
context.lineTo(780,125);
context.fillStyle = 'green';
context.fill();
//6
context.beginPath();
context.moveTo(675,125);
context.lineTo(695,160);
context.quadraticCurveTo(700,150,715,145);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(700,150);
context.lineTo(710,180);
context.quadraticCurveTo(720,170,735,165);
context.lineTo(705,145);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(715,170);
context.lineTo(725,220);
context.quadraticCurveTo(730,195,755,195);
context.lineTo(725,165);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(730,200);
context.lineTo(735,245);
context.quadraticCurveTo(750,225,770,220);
context.lineTo(745,195);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(740,230);
context.lineTo(760,250);
context.lineTo(760,220);
context.fillStyle = 'green';
context.fill();
//coconut
context.beginPath();
context.arc(685, 125, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(675, 125, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> start here
//background
//sky
context.beginPath();
context.rect(0, 0, 800, 300);
var grd = context.createLinearGradient(0,0, 800, 600);
grd.addColorStop(0, '#FE2E2E');
grd.addColorStop(.35, '#8ED6FF');
context.fillStyle = grd;
context.fill();
context.closePath();
//////////////////////////////////////////////////
//dolphin
context.beginPath();
context.moveTo(420,315);
context.bezierCurveTo(450,250, 490,230, 495,255);
context.quadraticCurveTo(510,250, 510,260);
context.quadraticCurveTo(450,270, 420,330);
context.lineTo(410,320);
context.lineTo(420,315);
context.fillStyle = '#BDBDBD';
context.fill();
context.beginPath();
context.moveTo(440,300);
context.quadraticCurveTo(450,275, 475,272);
context.fillStyle = '#D8D8D8';
context.fill();
context.beginPath();
context.moveTo(475,271);
context.quadraticCurveTo(470,277, 470,287);
context.quadraticCurveTo(475,277, 485,267);
context.fillStyle = '#BDBDBD';
context.fill();
context.beginPath();
context.moveTo(475,271);
context.quadraticCurveTo(475,277, 480,283);
context.quadraticCurveTo(480,277, 485,267);
context.fillStyle = '#BDBDBD';
context.fill();
context.beginPath();
context.moveTo(463,255);
context.quadraticCurveTo(438,255, 438,270);
context.quadraticCurveTo(453,260, 453,270);
context.fillStyle = '#BDBDBD';
context.fill();
/////////////////////////////////////////////////
//water
context.beginPath();
context.rect(0, 300, 800, 300);
var grd = context.createLinearGradient(0,800, 0, 0);
grd.addColorStop(.25, '#EFF8FB');
grd.addColorStop(1, '#00BFFF');
context.fillStyle = grd;
context.fill();
context.closePath();
/////////////////////////////////////////////////
//beach
//left
context.beginPath();
context.moveTo(0, 340);
context.lineTo(50, 340);
context.lineTo(75, 350);
context.quadraticCurveTo(50, 500, 150, 600);
context.lineJoin = 'bevel';
context.lineTo(0, 600);
context.lineTo(0, 340);
context.fillStyle = '#EFF8FB';
context.fill();
context.closePath();
//right
context.beginPath();
context.moveTo(800, 340);
context.lineTo(750, 340);
context.lineTo(725, 350);
context.quadraticCurveTo(750, 500, 650, 600);
context.lineJoin = 'bevel';
context.lineTo(800, 600);
context.lineTo(800, 340);
context.fillStyle = '#EFF8FB';
context.fill();
//////////////////////////////////////////////////
//sun
context.beginPath();
context.arc(200, 100, 75, 0, 6.3, false);
var grd = context.createRadialGradient(200,100,50,200,100,150);
grd.addColorStop(1, '#FF0000');
grd.addColorStop(0, '#F7FE2E');
grd.addColorStop(.25, '#FF4000');
context.fillStyle = grd;
context.fill();
/////////////////////////////////////////////////////
//Boat
context.beginPath();
context.moveTo(175, 270);
context.lineTo(200, 300);
context.lineTo(300, 300);
context.lineTo(325, 260);
context.lineTo(175, 270);
context.lineJoin = 'bevel';
context.fillStyle = '#EFF8FB';
context.fill();
//sails
context.beginPath();
context.moveTo(200, 260);
context.lineTo(250, 150);
context.lineTo(300, 250);
context.lineTo(200, 260);
context.lineJoin = 'bevel';
var grd = context.createLinearGradient(0,0, 800, 600);
grd.addColorStop(.25, '#FF0000');
grd.addColorStop(.5, '#0D00FF');
context.fillStyle = grd;
context.fill();
//front
context.beginPath();
context.moveTo(250, 150);
context.quadraticCurveTo(350, 180, 300, 250);
context.lineJoin = 'bevel';
context.fillStyle = '#EFF8FB';
context.fill();
context.beginPath();
context.moveTo(250, 150);
context.lineTo(250, 150);
context.quadraticCurveTo(300, 200, 300, 250);
context.lineJoin = 'bevel';
context.fillStyle = '#8ED6FF';
context.fill();
//mast
context.beginPath();
context.moveTo(250, 150);
context.lineTo (250,265);
context.strokeStyle = 'light_gray';
context.stroke();
//boom
context.beginPath();
context.moveTo(200, 260);
context.lineTo (300, 250);
context.strokeStyle = 'light_gray';
context.stroke();
//edge
context.beginPath();
context.moveTo(175, 270);
context.lineTo (325, 260);
context.strokeStyle = 'light_gray';
context.stroke();
//////////////////////////////////////////////////
//starfish
context.beginPath();
context.moveTo(710, 540);
context.bezierCurveTo(700,530, 740, 480, 725, 470);
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
context.beginPath();
context.moveTo(760, 500);
context.bezierCurveTo(690,490, 750, 510, 680, 500);
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
context.beginPath();
context.moveTo(700, 480);
context.bezierCurveTo(710,475, 725,525 ,750, 530);
context.lineWidth = 5;
context.strokeStyle = 'tan';
context.stroke();
///////////////////////////////////////////////////
//tree left
//coconut
context.beginPath();
context.arc(70, 185, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//trunk
context.beginPath();
context.moveTo(75, 175);
context.quadraticCurveTo(25, 290, 25, 450);
context.lineTo(0, 450);
context.lineTo(0, 400);
context.lineTo(10, 375);
context.lineTo(0, 390);
context.lineTo(15, 340);
context.lineTo(5, 350);
context.lineTo(20, 310);
context.lineTo(10, 320);
context.lineTo(30, 270);
context.lineTo(35, 260);
context.lineTo(25, 270);
context.lineTo(45, 230);
context.lineTo(30, 240);
context.lineTo(75, 175);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#424242';
context.fill();
//coconuts
context.beginPath();
context.arc(10, 445, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(25, 450, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(80, 180, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(60, 180, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(65, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(75, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//leaves
//1
context.beginPath();
context.moveTo(75, 170);
context.lineTo(95,200);
context.quadraticCurveTo(90,185, 100,180);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(90,185);
context.lineTo(110,210);
context.quadraticCurveTo(110,200, 120,195);
context.lineTo(97,185);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(110,200);
context.lineTo(130,230);
context.quadraticCurveTo(130,220, 145,205);
context.lineTo(118,200);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(130, 220);
context.lineTo(150, 255);
context.quadraticCurveTo(155, 245, 170, 235);
context.lineTo(135, 210);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(155,245);
context.lineTo(155, 280);
context.quadraticCurveTo(170,275, 180,280);
context.lineTo(160,235);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(165,275);
context.lineTo(155, 320);
context.quadraticCurveTo(170,310, 180,320);
context.lineTo(175,275);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(165,315);
context.lineTo(170, 330);
context.lineTo(180,315);
context.fillStyle = 'green';
context.fill();
//2
context.beginPath();
context.moveTo(75, 170);
context.lineTo(100,175);
context.quadraticCurveTo(95,160, 100,150);
context.lineTo(75, 170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(95,165);
context.lineTo(130,170);
context.quadraticCurveTo(125,155, 130,145);
context.lineTo(95,160);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(125,160);
context.lineTo(155,170);
context.quadraticCurveTo(150,160, 155,145);
context.lineTo(125,150);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(150,160);
context.lineTo(180,180);
context.quadraticCurveTo(175,160, 185,150);
context.lineTo(150,155);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(178,170);
context.lineTo(205,195);
context.quadraticCurveTo(205,175, 220,160);
context.lineTo(178,160);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(205,180);
context.lineTo(227,180);
context.lineTo(210,165);
context.fillStyle = 'green';
context.fill();
//3
context.beginPath();
context.moveTo(75, 170);
context.lineTo(100,145);
context.quadraticCurveTo(85,145, 80,130);
context.lineTo(75, 170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(92,145);
context.lineTo(115,120);
context.quadraticCurveTo(100,120, 90,110);
context.lineTo(85,140);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(105,120);
context.lineTo(130,100);
context.quadraticCurveTo(120,100, 110,85);
context.lineTo(95,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(120,100);
context.lineTo(150,90);
context.quadraticCurveTo(140,75, 135,55);
context.lineTo(110,95);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(140,80);
context.lineTo(170,77);
context.quadraticCurveTo(165,60,170,45);
context.lineTo(135,65);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(165,65);
context.lineTo(205,75);
context.quadraticCurveTo(200,55,205,35);
context.lineTo(165,55);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(200,70);
context.lineTo(225,55);
context.lineTo(200,50);
context.fillStyle = 'green';
context.fill();
//4
context.beginPath();
context.moveTo(75,170);
context.lineTo(75,125);
context.quadraticCurveTo(60,135,50,140);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(65,135);
context.lineTo(60,95);
context.quadraticCurveTo(50,110,40,110);
context.lineTo(60,140);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(55,105);
context.lineTo(45,55);
context.quadraticCurveTo(35,76,20,90);
context.lineTo(45,110);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(40,65);
context.lineTo(25,35);
context.quadraticCurveTo(15,50,0,55);
context.lineTo(30,85);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(20,45);
context.lineTo(0,20);
context.lineTo(0,50);
context.lineTo(5,55);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(75,170);
context.lineTo(45,145);
context.quadraticCurveTo(45,155,35,160);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(45,150);
context.lineTo(30,130);
context.quadraticCurveTo(25,145,20,155);
context.lineTo(40,160);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(35,140);
context.lineTo(0,120);
context.lineTo(0,150);
context.lineTo(25,150);
context.fillStyle = 'green';
context.fill();
//6
context.beginPath();
context.moveTo(75,170);
context.lineTo(40,175);
context.quadraticCurveTo(55,180,55,205);
context.lineTo(75,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(50,180);
context.lineTo(20,195);
context.quadraticCurveTo(35,200,45,225);
context.lineTo(55,195);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(35,195);
context.lineTo(5,220);
context.quadraticCurveTo(20,225,30,240);
context.lineTo(40,210);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(15,225);
context.lineTo(0,235);
context.lineTo(0,260);
context.lineTo(15,265);
context.lineTo(25,230);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(0,260);
context.lineTo(0,280);
context.lineTo(10,260);
context.fillStyle = 'green';
context.fill();
//////////////////////////////////////////////////
//tree right
//coconut in water
context.beginPath();
context.arc(650, 400, 10, 2.36, .785, false);
context.fillStyle = 'rgba(97,33,11,.70)';
context.fill();
//trunk
context.beginPath();
context.moveTo(675, 125);
context.quadraticCurveTo(765, 290, 750, 350);
context.lineTo(790, 350);
context.lineTo(770, 320);
context.lineTo(780, 325);
context.lineTo(750, 275);
context.lineTo(760, 280);
context.lineTo(740, 240);
context.lineTo(752, 250);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#424242';
context.fill();
//coconuts
context.beginPath();
context.arc(670, 125, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(65, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(75, 175, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//leaves
//1
context.beginPath();
context.moveTo(675,125);
context.lineTo(640,130);
context.quadraticCurveTo(650,140,655,155);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(650,135);
context.lineTo(610,150);
context.quadraticCurveTo(625,160,630,175);
context.lineTo(655,145);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(620,155);
context.lineTo(580,190);
context.quadraticCurveTo(605,195,625,200);
context.lineTo(630,170);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(590,190);
context.lineTo(565,225);
context.quadraticCurveTo(580,220,605,235);
context.lineTo(620,195);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(575,220);
context.lineTo(575,250);
context.lineTo(600,220);
context.fillStyle = 'green';
context.fill();
//2
context.beginPath();
context.moveTo(675,125);
context.lineTo(645,95);
context.quadraticCurveTo(645,105,635,125);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(645,100);
context.lineTo(620,95);
context.quadraticCurveTo(625,105,620,125);
context.lineTo(645,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(625,100);
context.lineTo(590,95);
context.quadraticCurveTo(600,105,590,125);
context.lineTo(625,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(595,100);
context.lineTo(570,95);
context.quadraticCurveTo(580,105,575,125);
context.lineTo(605,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(575,100);
context.lineTo(545,100);
context.quadraticCurveTo(550,115,555,135);
context.lineTo(580,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(550,105);
context.lineTo(520,110);
context.quadraticCurveTo(540,125,545,145);
context.lineTo(555,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(530,115);
context.lineTo(520,140);
context.lineTo(545,135);
context.fillStyle = 'green';
context.fill();
//3
context.beginPath();
context.moveTo(675,125);
context.lineTo(670,75);
context.quadraticCurveTo(665,90,645,90);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(665,95);
context.lineTo(635,75);
context.quadraticCurveTo(650,65,655,50);
context.lineTo(670,95);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(650,60);
context.lineTo(640,40);
context.quadraticCurveTo(640,50,625,55);
context.lineTo(645,75);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(640,50);
context.lineTo(620,15);
context.quadraticCurveTo(620,30,600,45);
context.lineTo(635,55);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(620,25);
context.lineTo(580,15);
context.quadraticCurveTo(595,25,580,40);
context.lineTo(610,40);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(590,20);
context.lineTo(565,20);
context.lineTo(590,30);
context.fillStyle = 'green';
context.fill();
//4
context.beginPath();
context.moveTo(675,125);
context.lineTo(705,100);
context.quadraticCurveTo(690,95,680,80);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(695,100);
context.lineTo(720,75);
context.quadraticCurveTo(700,75,695,55);
context.lineTo(680,95);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(710,75);
context.lineTo(740,60);
context.quadraticCurveTo(720,50,705,35);
context.lineTo(690,110);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(730,55);
context.lineTo(765,45);
context.quadraticCurveTo(745,30,735,10);
context.lineTo(710,50);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(750,35);
context.lineTo(780,40);
context.quadraticCurveTo(775,25,780,5);
context.lineTo(740,20);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(775,30);
context.lineTo(795,25);
context.lineTo(775,20);
context.fillStyle = 'green';
context.fill();
//5
context.beginPath();
context.moveTo(675,125);
context.lineTo(705,130);
context.quadraticCurveTo(700,120,705,105);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(700,125);
context.lineTo(725,130);
context.quadraticCurveTo(720,120,725,100);
context.lineTo(700,120);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(720,125);
context.lineTo(745,130);
context.quadraticCurveTo(740,120,745,100);
context.lineTo(720,110);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(740,125);
context.lineTo(770,135);
context.quadraticCurveTo(765,120,770,100);
context.lineTo(740,105);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(765,130);
context.lineTo(790,145);
context.quadraticCurveTo(785,125,795,110);
context.lineTo(765,115);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(780,130);
context.lineTo(800,135);
context.lineTo(800,120);
context.lineTo(780,125);
context.fillStyle = 'green';
context.fill();
//6
context.beginPath();
context.moveTo(675,125);
context.lineTo(695,160);
context.quadraticCurveTo(700,150,715,145);
context.lineTo(675,125);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(700,150);
context.lineTo(710,180);
context.quadraticCurveTo(720,170,735,165);
context.lineTo(705,145);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(715,170);
context.lineTo(725,220);
context.quadraticCurveTo(730,195,755,195);
context.lineTo(725,165);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(730,200);
context.lineTo(735,245);
context.quadraticCurveTo(750,225,770,220);
context.lineTo(745,195);
context.fillStyle = 'green';
context.fill();
context.beginPath();
context.moveTo(740,230);
context.lineTo(760,250);
context.lineTo(760,220);
context.fillStyle = 'green';
context.fill();
//coconut
context.beginPath();
context.arc(685, 125, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.arc(675, 125, 10, 0, 6.3, false);
context.fillStyle = '#61210B';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)