Monday, December 9, 2013
Thursday, November 21, 2013
11/21/13 Progress
- finished ripple
- created fishing poles on illustrator
- animated the background falling into place
Tuesday, November 19, 2013
Thursday, November 14, 2013
Tuesday, November 12, 2013
11/12/13 Progress
- got Danbos and camera
- continued to gather items needed
- waiting for assistant for photos
- worked on background on illustrator
Thursday, November 7, 2013
Final Project - Part 2
1) 3rd person POV, camera angle a little higher than at eye level, camera held landscape, wide view
- setting: table (maybe the study room - 7th floor)
- hands and upper part of body in camera view setting up the Danbos (several photos - close time for smooth animation) - just hands moving Danbos (not animated yet)
- need: Danbos, camera, another person to take the photos
- complete photos by: Thanksgiving
2) 3rd person POV, same camera angles
- create background on illustrator (boat/sky/water/fishing poles) - fall into place
3) 3rd person POV, same camera angles
- Danbos start moving - (left one) looking over at rod two times with excited expression (Photoshop expression) - (right one) expression relaxed (Photoshop expression)
- right Danbo pulls up a fish - reeling motion (need: photo of goldfish - photoshopped or illustrator fish) - happy expression
- right Danbo pulls up three more fish - left Danbo's expression getting more worried (looking over more)
- left Danbo's fishing rod moves - expression shocked
4) POV of left Danbo looking over at water - just see water ripple
5) back to original 3rd person POV with same camera angles, left Danbo's rod bent - left Danbo worried expression & right Danbo shocked expression
- right Danbo tries to help - rod flies out of left Danbo's hands
6) close up of left Danbo's sad face
7) back to original camera angles, a little closer, right Danbo gives left Danbo two fish (goldfish?) - happy expressions
8) Danbos holding up 'The End' sign (illustrator) - happy expressions
9) Thanks for watching - credits
Tuesday, November 5, 2013
Final Project - Part 1
I'm going to set up Danbos (dolls) on a table, then after my hands are gone, the animation will start and they will "come to life." With a background and boat created in Illustrator, it will slide onto the screen and they will be fishing. The fishing pole's movement will be created in Illustrator as well, and I will use goldfish as the "fish" that they catch.
Thursday, October 31, 2013
Wednesday, October 23, 2013
Thursday, October 17, 2013
Thursday, October 3, 2013
Tuesday, October 1, 2013
Tuesday, September 24, 2013
Thursday, September 19, 2013
Thursday, September 12, 2013
Assignment 02 Completed
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
// background
// sky
context.beginPath();
context.rect(0,0,800,400);
// add Linear Gradient
var grd = context.createLinearGradient(400, 0, 400, 400);
// dark blue
grd.addColorStop(0, "RGB(8, 103, 246)");
// light blue
grd.addColorStop(1, "RGB(106, 216, 250)");
context.fillStyle = grd;
context.fill();
// grass
context.beginPath();
context.rect(0,400,800,200);
// add Linear Gradient
var grd = context.createLinearGradient(400, 400, 400, 600);
// dark green
grd.addColorStop(0, "RGB(0, 102, 51)");
// light green
grd.addColorStop(1, "RGB(0, 173, 56)");
context.fillStyle = grd;
context.fill();
// sun
context.beginPath();
context.arc(0, 0, 100, 0, 2 * Math.PI, false);
// add Radial Gradient
var grd = context.createRadialGradient(0, 0, 30, 0, 0, 100);
grd.addColorStop(0, "#EF6439");
grd.addColorStop(0.33, "#F6911D");
grd.addColorStop(0.67, "#EFC539");
grd.addColorStop(1, "#FCDB71");
context.fillStyle = grd;
context.fill();
// pool
// base
context.beginPath();
context.rect(320,400,130,38);
context.fillStyle = '#FAFACA';
context.fill();
context.stroke();
// water
context.beginPath();
context.rect(328,400,122,30);
// add Linear Gradient
var grd = context.createLinearGradient(400, 400, 400, 430);
// dark blue
grd.addColorStop(0, "RGB(8, 103, 246)");
// light blue
grd.addColorStop(1, "RGB(106, 216, 250)");
context.fillStyle = grd;
context.fill();
// house
// first square
context.beginPath();
context.rect(450,350,100,100);
context.fillStyle = '#E4D4B6';
context.fill();
context.stroke();
// first roof
context.beginPath();
context.moveTo(450, 350);
context.lineTo(625, 200);
context.lineTo(625, 350);
context.lineTo(450, 350);
context.fillStyle = '#404040';
context.fill();
context.stroke();
// third roof
context.beginPath();
context.moveTo(800, 350);
context.lineTo(625, 200);
context.lineTo(625, 350);
context.lineTo(800, 350);
context.fillStyle = '#404040';
context.fill();
context.stroke();
// third square
context.beginPath();
context.rect(700,350,100,100);
context.fillStyle = '#E4D4B6';
context.fill();
context.stroke();
// chimney
context.beginPath();
context.rect(660,200,40,100);
context.fillStyle = '#521616';
context.fill();
context.stroke();
// second square
context.beginPath();
context.rect(550,300,150,150);
context.fillStyle = '#E4D4B6';
context.fill();
context.stroke();
// second roof
context.beginPath();
context.moveTo(550, 300);
context.lineTo(625, 180);
context.lineTo(700, 300);
context.lineTo(550, 300);
context.fillStyle = '#404040';
context.fill();
context.stroke();
// door
context.beginPath();
context.rect(590,400,70,50);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(625,400);
context.lineTo(625,450);
context.fill();
context.stroke();
// window left
context.beginPath();
context.arc(750, 400, 25, 0, 2 * Math.PI, false);
var grd = context.createLinearGradient(725, 400, 775, 400);
grd.addColorStop(0, "RGB(250, 255, 64)");
grd.addColorStop(1, "RGB(81, 81, 81)");
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(750,375);
context.lineTo(750,425);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(725,400);
context.lineTo(775,400);
context.fill();
context.stroke();
// window right
context.beginPath();
context.arc(500, 400, 25, 0, 2 * Math.PI, false);
var grd = context.createLinearGradient(475, 400, 525, 400);
grd.addColorStop(1, "RGB(250, 255, 64)");
grd.addColorStop(0, "RGB(81, 81, 81)");
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500,375);
context.lineTo(500,425);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(475,400);
context.lineTo(525,400);
context.fill();
context.stroke();
// window center L
context.beginPath();
context.rect(567,325,50,50);
var grd = context.createLinearGradient(400, 350, 617, 350);
grd.addColorStop(1, "RGB(250, 255, 64)");
grd.addColorStop(0, "RGB(81, 81, 81)");
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(592,325);
context.lineTo(592,375);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(567,350);
context.lineTo(617,350);
context.fill();
context.stroke();
// window center R
context.beginPath();
context.rect(633,325,50,50);
var grd = context.createLinearGradient(725, 400, 775, 400);
grd.addColorStop(0, "RGB(250, 255, 64)");
grd.addColorStop(1, "RGB(81, 81, 81)");
context.fillStyle = grd;
context.fill();
context.stroke();
context.beginPath();
context.moveTo(658,325);
context.lineTo(658,375);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(633,350);
context.lineTo(683,350);
context.fill();
context.stroke();
// door handles
context.beginPath();
context.moveTo(620,420);
context.lineTo(620,430);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(630,420);
context.lineTo(630,430);
context.fill();
context.stroke();
// swings
context.beginPath();
context.moveTo(29, 300);
context.lineTo(171, 300);
context.lineTo(29, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(30, 300);
context.lineTo(30, 400);
context.lineTo(30, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(170, 300);
context.lineTo(170, 400);
context.lineTo(170, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(30, 400);
context.lineTo(20, 430);
context.lineTo(30, 400);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(30, 400);
context.lineTo(35, 410);
context.lineTo(30, 400);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(170, 400);
context.lineTo(180, 430);
context.lineTo(170, 400);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(170, 400);
context.lineTo(165, 410);
context.lineTo(170, 400);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 4;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(50, 300);
context.lineTo(50, 370);
context.lineTo(50, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(80, 300);
context.lineTo(80, 370);
context.lineTo(80, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.rect(50, 370, 30, 20);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(110, 300);
context.lineTo(110, 360);
context.lineTo(110, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.moveTo(140, 300);
context.lineTo(140, 360);
context.lineTo(140, 300);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#0E4B18';
context.stroke();
context.beginPath();
context.rect(110, 360, 30, 20);
context.fillStyle = '#0E4B18';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#0E4B18';
context.stroke();
// me
// hair
context.beginPath();
context.moveTo(300, 400);
context.lineTo(277, 335);
context.lineTo(240, 400);
context.lineTo(300, 400);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(200, 400);
context.lineTo(222, 330);
context.lineTo(253, 400);
context.lineTo(200, 400);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.rect(200,399,100,70);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
// neck
context.beginPath();
context.rect(245,370,10,30);
context.fillStyle = '#D5CBAD';
context.fill();
context.strokeStyle = "#D5CBAD";
context.stroke();
// head
context.beginPath();
context.arc(249, 350, 30, 0, 2 * Math.PI, false);
context.fillStyle = '#D5CBAD';
context.fill();
context.strokeStyle = "#D5CBAD";
context.stroke();
// arms
context.beginPath();
context.moveTo(205, 420);
context.lineTo(205, 460);
context.fillStyle = '#D5CBAD';
context.fill();
context.lineWidth = 15;
context.strokeStyle = '#D5CBAD';
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(205, 460);
context.lineTo(170, 440);
context.fillStyle = '#D5CBAD';
context.fill();
context.lineWidth = 15;
context.lineCap = 'round';
context.strokeStyle = '#D5CBAD';
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(295, 420);
context.lineTo(295, 460);
context.fillStyle = '#D5CBAD';
context.fill();
context.lineWidth = 15;
context.strokeStyle = '#D5CBAD';
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(295, 460);
context.lineTo(325, 480);
context.fillStyle = '#D5CBAD';
context.fill();
context.lineWidth = 15;
context.lineCap = 'round';
context.strokeStyle = '#D5CBAD';
context.stroke();
context.closePath();
// legs
context.beginPath();
context.moveTo(233, 500);
context.lineTo(233, 570);
context.fillStyle = '#D5CBAD';
context.fill();
context.lineWidth = 15;
context.lineCap = 'square';
context.strokeStyle = '#D5CBAD';
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(270, 500);
context.lineTo(270, 570);
context.fillStyle = '#D5CBAD';
context.fill();
context.lineWidth = 15;
context.lineCap = 'square';
context.strokeStyle = '#D5CBAD';
context.stroke();
context.closePath();
// left shoe
context.beginPath();
context.beginPath();
context.rect(225, 570, 16, 16);
context.fillStyle = '#7E7C80';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#7E7C80';
context.stroke();
context.beginPath();
context.moveTo(225, 570);
context.lineTo(200, 595);
context.lineTo(225, 587);
context.lineTo(225, 570);
context.fillStyle = '#7E7C80';
context.fill();
context.strokeStyle = '#7E7C80';
context.stroke();
context.beginPath();
context.moveTo(236, 577);
context.lineTo(236, 588);
context.fillStyle = '#7E7C80';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#7E7C80';
context.stroke();
// right shoe
context.beginPath();
context.beginPath();
context.rect(262, 570, 16, 16);
context.fillStyle = '#7E7C80';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#7E7C80';
context.stroke();
context.beginPath();
context.moveTo(278, 570);
context.lineTo(303, 595);
context.lineTo(278, 587);
context.lineTo(278, 570);
context.fillStyle = '#7E7C80';
context.fill();
context.strokeStyle = '#7E7C80';
context.stroke();
context.beginPath();
context.moveTo(266, 577);
context.lineTo(266, 588);
context.fillStyle = '#7E7C80';
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#7E7C80';
context.stroke();
// dress
context.beginPath();
context.arc(280, 430, 31, 2 * Math.PI, 1 * Math.PI, true);
context.fillStyle = "#750BEF";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "#750BEF";
context.stroke();
context.beginPath();
context.arc(220, 430, 31, 2 * Math.PI, 1 * Math.PI, true);
context.fillStyle = "#750BEF";
context.fill();
context.strokeStyle = "#750BEF";
context.stroke();
context.beginPath();
context.moveTo(180, 510);
context.lineTo(250, 440);
context.lineTo(320, 510);
context.lineTo(180, 510);
context.fillStyle = '#750BEF';
context.fill();
context.strokeStyle = '#750BEF';
context.stroke();
context.beginPath();
context.rect(220,399,60,70);
context.fillStyle = '#750BEF';
context.fill();
context.strokeStyle = '#750BEF';
context.stroke();
// hair bangs
context.beginPath();
context.arc(252, 359, 40, 1.5 * Math.PI, 1.2 * Math.PI, true);
context.fillStyle = "#000000";
context.fill();
context.strokeStyle = "#000000";
context.stroke();
context.beginPath();
context.arc(243, 363, 44, 1.8 * Math.PI, 1.5 * Math.PI, true);
context.fillStyle = "#000000";
context.fill();
context.strokeStyle = "#000000";
context.stroke();
context.beginPath();
context.arc(245, 350, 30, 1.5 * Math.PI, 1.2 * Math.PI, true);
context.fillStyle = "#000000";
context.fill();
context.strokeStyle = "#000000";
context.stroke();
// left eye
context.beginPath();
context.arc(237, 338, 10, .8 * Math.PI, .2 * Math.PI, true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = "#FFFFFF";
context.stroke();
context.beginPath();
context.arc(237, 350, 10, 1.8 * Math.PI, 1.2 * Math.PI, true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = "#FFFFFF";
context.stroke();
context.beginPath();
context.arc(240, 344, 4, 0, 2 * Math.PI, false);
context.fillStyle = '#756139';
context.fill();
context.strokeStyle = '#FFFFFF';
context.stroke();
context.beginPath();
context.arc(240, 344, 1.5, 0, 2 * Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = "#000000";
context.stroke();
context.beginPath();
context.moveTo(230, 342);
context.lineTo(228, 338);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(232, 341);
context.lineTo(230, 337);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(234, 340);
context.lineTo(232, 336);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
// right eye
context.beginPath();
context.arc(260, 338, 10, .8 * Math.PI, .2 * Math.PI, true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = "#FFFFFF";
context.stroke();
context.beginPath();
context.arc(260, 350, 10, 1.8 * Math.PI, 1.2 * Math.PI, true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = "#FFFFFF";
context.stroke();
context.beginPath();
context.arc(264, 344, 4, 0, 2 * Math.PI, false);
context.fillStyle = '#756139';
context.fill();
context.strokeStyle = "#FFFFFF";
context.stroke();
context.beginPath();
context.arc(264, 344, 1.5, 0, 2 * Math.PI, false);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = "#000000";
context.stroke();
context.beginPath();
context.moveTo(268, 342);
context.lineTo(270, 338);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(266, 341);
context.lineTo(268, 337);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(264, 340);
context.lineTo(266, 336);
context.fillStyle = '#000000';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
// nose
context.beginPath();
context.moveTo(248, 352);
context.lineTo(254, 358);
context.lineTo(248, 358);
context.fillStyle = '#D5CBAD';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
// mouth
context.beginPath();
context.arc(250, 365, 10, 1 * Math.PI, 2 * Math.PI, true);
context.fillStyle = "#FFFFFF";
context.fill();
context.strokeStyle = "#D15959";
context.lineWidth = 2;
context.stroke();
context.beginPath();
context.moveTo(240, 365);
context.lineTo(260, 365);
context.fill();
context.strokeStyle = '#D15959';
context.stroke();
context.beginPath();
context.arc(250, 375, 5, 2 * Math.PI, 1 * Math.PI, true);
context.fillStyle = "#D15959";
context.fill();
context.strokeStyle = "#D15959";
context.lineWidth = 1;
context.stroke();
// bow
context.beginPath();
context.moveTo(238, 320);
context.lineTo(220, 312);
context.lineTo(228, 336);
context.lineTo(238, 320);
context.fillStyle = '#FD76D0';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(238, 320);
context.lineTo(252, 304);
context.lineTo(256, 326);
context.lineTo(238, 320);
context.fillStyle = '#FD76D0';
context.fill();
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.arc(240, 320, 5, 0, 2 * Math.PI, false);
context.fillStyle = "#FD76D0";
context.fill();
context.strokeStyle = "#000000";
context.stroke();
// necklace
context.beginPath();
context.arc(250, 400, 20, 1 * Math.PI, 2 * Math.PI, true);
context.strokeStyle = "#000000";
context.lineWidth = 2;
context.stroke();
context.beginPath();
context.arc(246, 420, 3, 0, 2 * Math.PI, false);
context.fillStyle = "#FD76D0";
context.fill();
context.strokeStyle = "#FD76D0";
context.stroke();
context.beginPath();
context.arc(254, 420, 3, 0, 2 * Math.PI, false);
context.fillStyle = "#FD76D0";
context.fill();
context.strokeStyle = "#FD76D0";
context.stroke();
context.beginPath();
context.moveTo(243, 421);
context.lineTo(250, 430);
context.lineTo(257, 421);
context.fillStyle = '#FD76D0';
context.fill();
context.strokeStyle = '#FD76D0';
context.stroke();
// lollipop
context.beginPath();
context.moveTo(170, 440);
context.lineTo(166, 415);
context.lineTo(170, 440);
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 6;
context.lineCap = 'round';
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.arc(164, 406, 17, 0, 2 * Math.PI, false);
context.fillStyle = "#6200C4";
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(164, 406, 14, 0, 2 * Math.PI, false);
context.fillStyle = "#1921FF";
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(164, 406, 11, 0, 2 * Math.PI, false);
context.fillStyle = "#0C9536";
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(164, 406, 8, 0, 2 * Math.PI, false);
context.fillStyle = "#FFF922";
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(164, 406, 5, 0, 2 * Math.PI, false);
context.fillStyle = "#EE9025";
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(164, 406, 2, 0, 2 * Math.PI, false);
context.fillStyle = "#FF0000";
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// purse
context.beginPath();
context.arc(330, 485, 14, 1.5 * Math.PI, 1 * Math.PI, true);
context.strokeStyle = "#000000";
context.lineWidth = 2;
context.stroke();
context.beginPath();
context.arc(330, 485, 14, 2 * Math.PI, 1.5 * Math.PI, true);
context.strokeStyle = "#000000";
context.lineWidth = 2;
context.stroke();
context.beginPath();
context.moveTo(316, 485);
context.lineTo(316, 495);
context.lineTo(316, 485);
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(344, 485);
context.lineTo(344, 495);
context.lineTo(344, 485);
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.rect(306, 495, 50, 30);
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 1;
context.stroke();
// chair
context.beginPath();
context.moveTo(50, 420);
context.lineTo(50, 490);
context.lineTo(50, 420);
context.lineWidth = 4;
context.strokeStyle = '#C0A061';
context.stroke();
context.beginPath();
context.moveTo(130, 420);
context.lineTo(130, 490);
context.lineTo(130, 420);
context.strokeStyle = '#C0A061';
context.stroke();
context.beginPath();
context.rect(50, 420, 80, 40);
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(50, 460);
context.lineTo(35, 470);
context.lineTo(50, 460);
context.lineWidth = 4;
context.strokeStyle = '#C0A061';
context.stroke();
context.beginPath();
context.moveTo(35, 470);
context.lineTo(35, 510);
context.lineTo(35, 470);
context.strokeStyle = '#C0A061';
context.stroke();
context.beginPath();
context.moveTo(55, 510);
context.lineTo(145, 565);
context.lineTo(55, 510);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(125, 510);
context.lineTo(35, 565);
context.lineTo(125, 510);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(50, 490);
context.lineTo(35, 510);
context.lineTo(145, 510);
context.lineTo(130, 490);
context.lineTo(50, 490);
context.fillStyle = '#000000';
context.fill();
context.lineWidth = 1;
context.strokeStyle = '#000000';
context.stroke();
context.beginPath();
context.moveTo(50, 490);
context.lineTo(35, 510);
context.lineTo(50, 490);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(130, 490);
context.lineTo(145, 510);
context.lineTo(130, 490);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(130, 460);
context.lineTo(145, 470);
context.lineTo(130, 460);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(145, 470);
context.lineTo(145, 510);
context.lineTo(145, 470);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(35, 510);
context.lineTo(145, 580);
context.lineTo(35, 510);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(145, 510);
context.lineTo(35, 580);
context.lineTo(145, 510);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(45, 560);
context.lineTo(45, 575);
context.lineTo(45, 560);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.beginPath();
context.moveTo(135, 560);
context.lineTo(135, 575);
context.lineTo(135, 560);
context.strokeStyle = '#C0A061';
context.lineWidth = 4;
context.stroke();
context.closePath();
context.beginPath();
context.moveTo(90, 427);
context.lineTo(85, 435);
context.lineTo(95, 435);
context.lineTo(90, 427);
context.fillStyle = '#EFFF00';
context.fill();
context.strokeStyle = '#EFFF00';
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.moveTo(85, 435);
context.lineTo(77, 435);
context.lineTo(85, 443);
context.lineTo(85, 435);
context.fillStyle = '#EFFF00';
context.fill();
context.strokeStyle = '#EFFF00';
context.stroke();
context.beginPath();
context.moveTo(95, 435);
context.lineTo(105, 435);
context.lineTo(95, 443);
context.lineTo(95, 435);
context.fillStyle = '#EFFF00';
context.fill();
context.strokeStyle = '#EFFF00';
context.stroke();
context.beginPath();
context.moveTo(83, 440);
context.lineTo(81, 451);
context.lineTo(90, 445);
context.lineTo(83, 440);
context.fillStyle = '#EFFF00';
context.fill();
context.strokeStyle = '#EFFF00';
context.stroke();
context.beginPath();
context.moveTo(98, 441);
context.lineTo(100, 451);
context.lineTo(90, 445);
context.lineTo(98, 441);
context.fillStyle = '#EFFF00';
context.fill();
context.strokeStyle = '#EFFF00';
context.stroke();
context.closePath();
context.beginPath();
context.rect(85, 435, 10, 10);
context.fillStyle = '#EFFF00';
context.fill();
context.strokeStyle = '#EFFF00';
context.stroke();
// path
context.beginPath();
context.moveTo(599, 450);
context.lineTo(650, 450);
context.lineTo(660, 520);
context.lineTo(610, 520);
context.lineTo(599, 450);
context.fillStyle = '#B7B794';
context.fill();
context.beginPath();
context.arc(640, 480, 50, 1.2 * Math.PI, 0.7 * Math.PI, true);
context.fillStyle = '#B7B794';
context.fill();
context.beginPath();
context.arc(675, 481, 40, 1.3 * Math.PI, 0.55 * Math.PI, true);
var grd = context.createLinearGradient(400, 400, 400, 600);
grd.addColorStop(0, "RGB(0, 102, 51)");
grd.addColorStop(1, "RGB(0, 173, 56)");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.moveTo(610, 520);
context.lineTo(660, 520);
context.lineTo(660, 600);
context.lineTo(610, 600);
context.lineTo(610, 520);
context.fillStyle = '#B7B794';
context.fill();
context.beginPath();
context.arc(631, 559, 50, 0.4 * Math.PI, 1.7 * Math.PI, true);
context.fillStyle = '#B7B794';
context.fill();
context.beginPath();
context.arc(580, 560, 50, 0.4 * Math.PI, 1.65 * Math.PI, true);
var grd = context.createLinearGradient(400, 400, 400, 600);
grd.addColorStop(0, "RGB(0, 102, 51)");
grd.addColorStop(1, "RGB(0, 173, 56)");
context.fillStyle = grd;
context.fill();
// flowers
// left flower one
context.beginPath();
context.moveTo(570, 468);
context.lineTo(570, 496);
context.lineTo(570, 468);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = '#30CB25';
context.stroke();
context.beginPath();
context.arc(566, 488, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = "#30CB25";
context.lineWidth = 1;
context.stroke();
context.beginPath();
// second petal
context.arc(563, 466, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FF0303';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// third petal
context.beginPath();
context.arc(565, 475, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FF0303';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fourth petal
context.beginPath();
context.arc(575, 475, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FF0303';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fifth petal
context.beginPath();
context.arc(577, 466, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FF0303';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// first petal
context.beginPath();
context.arc(570, 460, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FF0303';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(570, 468, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#EFFF03';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// left flower two
context.beginPath();
context.moveTo(575, 508);
context.lineTo(575, 536);
context.lineTo(575, 508);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = '#30CB25';
context.stroke();
context.beginPath();
context.arc(571, 528, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = "#30CB25";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(570, 515, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#F3A949';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(567, 506, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#F3A949';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(580, 515, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#F3A949';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(582, 506, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#F3A949';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(575, 500, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#F3A949';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(575, 508, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#EFFF03';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// left flower three
context.beginPath();
context.moveTo(600, 553);
context.lineTo(600, 581);
context.lineTo(600, 553);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = '#30CB25';
context.stroke();
context.beginPath();
context.arc(596, 573, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = "#30CB25";
context.lineWidth = 1;
context.stroke();
context.beginPath();
// second petal
context.arc(593, 551, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#1120EE';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// third petal
context.beginPath();
context.arc(595, 560, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#1120EE';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fourth petal
context.beginPath();
context.arc(605, 560, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#1120EE';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fifth petal
context.beginPath();
context.arc(607, 551, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#1120EE';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// first petal
context.beginPath();
context.arc(600, 545, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#1120EE';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(600, 553, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#EFFF03';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// right flower one
context.beginPath();
context.moveTo(680, 468);
context.lineTo(680, 496);
context.lineTo(680, 468);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = '#30CB25';
context.stroke();
context.beginPath();
context.arc(676, 488, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = "#30CB25";
context.lineWidth = 1;
context.stroke();
context.beginPath();
// second petal
context.arc(673, 466, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#4BE7FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// third petal
context.beginPath();
context.arc(675, 475, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#4BE7FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fourth petal
context.beginPath();
context.arc(685, 475, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#4BE7FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fifth petal
context.beginPath();
context.arc(687, 466, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#4BE7FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// first petal
context.beginPath();
context.arc(680, 460, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#4BE7FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(680, 468, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#EFFF03';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// right flower two
context.beginPath();
context.moveTo(695, 502);
context.lineTo(695, 531);
context.lineTo(695, 502);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = '#30CB25';
context.stroke();
context.beginPath();
context.arc(691, 523, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = "#30CB25";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(690, 510, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#9340FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(687, 501, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#9340FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(700, 510, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#9340FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(702, 501, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#9340FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(695, 495, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#9340FF';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(695, 503, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#EFFF03';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// right flower three
context.beginPath();
context.moveTo(705, 558);
context.lineTo(705, 576);
context.lineTo(705, 548);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = '#30CB25';
context.stroke();
context.beginPath();
context.arc(701, 568, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#30CB25';
context.fill();
context.strokeStyle = "#30CB25";
context.lineWidth = 1;
context.stroke();
context.beginPath();
// second petal
context.arc(698, 546, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FA93DB';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// third petal
context.beginPath();
context.arc(700, 555, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FA93DB';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fourth petal
context.beginPath();
context.arc(710, 555, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FA93DB';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// fifth petal
context.beginPath();
context.arc(712, 546, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FA93DB';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// first petal
context.beginPath();
context.arc(705, 540, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#FA93DB';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(705, 548, 5, 0, 2 * Math.PI, false);
context.fillStyle = '#EFFF03';
context.fill();
context.strokeStyle = "#000000";
context.lineWidth = 1;
context.stroke();
// bushes
// left bush
context.beginPath();
context.arc(462, 450, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(482, 440, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(484, 460, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(502, 445, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(512, 460, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(525, 442, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(538, 460, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
// right bush
context.beginPath();
context.arc(710, 450, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(730, 440, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(750, 450, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(730, 460, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(770, 440, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(770, 460, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(790, 450, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(750, 465, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#0C400F';
context.fill();
context.strokeStyle = "#0C400F";
context.lineWidth = 1;
context.stroke();
// clouds
context.beginPath();
context.arc(200, 100, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(220, 110, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(220, 85, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(240, 90, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(240, 112, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(260, 85, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(260, 105, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(280, 95, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(400, 178, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(380, 164, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(400, 150, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(419, 155, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(420, 175, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(440, 155, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(440, 175, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(460, 165, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(650, 70, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(670, 50, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(652, 52, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(670, 70, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(685, 60, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(700, 70, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(695, 50, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(720, 56, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.arc(630, 60, 15, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.strokeStyle = "#FFFFFF";
context.lineWidth = 1;
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Subscribe to:
Posts (Atom)