Updated storyboard

Not many changes were made to the original storyboard post hence the lack of continuous updates, however, the changes that were made were only decided on the day of the photo shoot. The new adjusted story is as follows:

Film name: "Fingers of fury"

As with the original idea, the film begins with a hand writing the name of the production company. The following segment changes to the outdoor location at Riverside where the first part of the acting took place. In this second segment, some frames are taken of me walking passed the camera with a paper saying "Presents". Then the film officially starts with me (actor 1) approaching my best friend (actor 2) whom is taking in the beautiful view on his special day (birthday). I present him with a birthday card with an additional note inside just as a fun friendly gesture as an addition to his birthday card. The camera angles changes by zooming in on the card as i hand it to him, to allow the viewers to see the text written on the card clearly showing the word "Birthday" along with other words. The camera angle then changes again zooming out to the regular zoom amount. After actor 2 opens the card, he throws the card to the ground and opens and reads the note inside. Again the camera zooms in on the note and his hands to emphasize the note and to also to focus on what happens next, which is the setting fire of the note by actor 2 and then drops it to the ground. Again the camera zooms out to the regular shot to show my reaction of disappointment. Then a zoom in on the burning paper is included for that extra touch of sorrow etc in combination with the music playing during the scene.

A transition frame then comes up saying "of course, this means war... but first a costume change". Then the following frame is one of actor 1 and actor 2 in a zoomed-in-on shot of us in fight position. Then goes back to the regular zoomed out view, which is when actor 2 pushes me away and the fight officially starts, with us moving back into our attacking pose then we run in towards each other with fists out ready to battle and as we're about to hit each other, the shot changes to the final segment of the fight which is the big finer battle. A variety of moves and attacks are included in the finger fight including actor 1's special attack; the lightning bolt which is followed by actor 2's special attack; the fire ball. After actor 1 makes his finishing move of a charged airborne kick and actor 2 succumbs to the fatal attack, the camera angle changes showing actor 2's fingers laying there dead in a pool of his own blood.

Lastly, to conclude the film, the final segment includes the title frames saying "R.I.P best friend, then, "The End". After this, the credits finish off the film giving credit to persons who assisted in the making of the film as well as the other features such as making mention of the music used. Those final credits include, producer and director, actors, cameraman and music in that order.

Storyboard April 10th, 2014.

Concept: A battle of best friends to the death

The short film will begin with a hand writing the name of the film as well as the name of the production company, then the film begins as follows:

On the day of my best friend's birthday, in attempt to wish my best friend happy birthday with a cake, he unexpectedly throws it down to the ground destroying it and says to me "you will honor me on my birthday with a battle to the death of one of us". The entire scene changed when i accept the challenge as we charge towards each other menacingly. We then begin the battle, however, unexpectedly its just a finger fight with a white paper background along with visual effects of explosions, fire, lightning etc that our fingers produce while intensely fighting. The camera angle will change a few times where we zoom out to show our entire bodies leaning in towards each other while we finger fight; this will hopefully add variety to the camera angles as well as comical value. Also on "harmful" attack moves, the person receiving it will have facial effects of pain as the camera angle changes to their face. The fight continues till a very destructive and effective lightning attack which leads to the death of one person with their fingers "bleeding out" and the camera angle will once again zoom out showing the defeated person laying dead while the other friend stands strong and victorious.

The final part of the short film will be the second set of credits with "The End", producer title, director title, actors and artist.

Finished Ellipse project April 8th, 2014.

Updated Photoshop animation. Apr 3rd, 2014.

Photoshop animation 1. Apr 3rd, 2014.

Completed Asignment 4. Apr, 1st, 2014.

Business Card Design 1 Complete March 27, 2014.

Business Card Logos March 25th, 2014.

Finished Propaganda Poster. Mar, 20th, 2014.

Propaganda Poster Progress March, 18th, 2014.

Assignment 1 adjustment

My adjusted 3 elements I like for assignment 1:
1. Going to the beach
2. Admiring sunsets
3. Photography

assignment 2 completed

Final portrait Feb 18th, 2014.

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

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

////////////////////////////SKY///////////////

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 200;
     
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(800, 150, 800, 0);
        // STARTING COLOR
        grd.addColorStop(0, "#FF3300");
        // INTERMEDIATE COLOR
        grd.addColorStop(0.5, "#990000");
        // ENDING COLOR
        grd.addColorStop(1, "#660066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();

//////////////////////SEA/////////////

        var x = 0;
        var y = 200;
        var width = 800;
        var height = 100;
     
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(400, 200, 400, 300);
        // STARTING COLOR
        grd.addColorStop(1, "#00CCFF");
        // ENDING COLOR
        grd.addColorStop(0.25, "#000066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();
     
/////////////////////SAND/////////////

        context.beginPath();
        context.rect(0, 300, 800, 600);
        context.fillStyle = "#FFCC99";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFCC99";
        context.stroke();
        context.closePath();

//////////////////SUN/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 150;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(160, 200, radius, startangle, endangle, true);
        context.fillStyle = "#FF6600";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FF6600";
        context.stroke();
        context.closePath();
     
///////////////////MIDDLE-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 35;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(535, 110, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(535, 110, 5, 535, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
//////////////////BOTTOM-LEFT-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(500, 120, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
/////////////////////////MIDDLE-LEFT-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 90, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(470, 90, 5, 520, 110, 54);
        // STARTING COLOR
        grd.addColorStop(0.15, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.55, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

///////////////TOP-LEFT-CLOUD/////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(515, 60, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(515, 60, 5, 520, 80, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
/////////////MIDDLE-BOTTOM-CLOUD////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(570, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(570, 120, 5, 520, 80, 270);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
     
//////////////RIGHT-BOTTOM-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(600, 105, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(600, 105, 5, 520, 80, 275);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(1, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

//////////////HEAD//////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 45;

        context.beginPath();
        context.arc(500, 350, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();

////////////HAIR/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 42;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(500, 335, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////MOUTH///////////////

   var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 10;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 381, radius, startangle, endangle, true);
        context.fillStyle = "black";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
        context.closePath();
     
///////////////LEFT-NOSE///////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(496, 371, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////////RIGHT-NOSE/////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(505, 371, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////////LEFT-EYE///////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7;

        context.beginPath();
        context.arc(479, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.closePath();

////////////RIGHT-EYE///////////////////


  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7;

        context.beginPath();
        context.arc(520, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.closePath();
     
/////////////LEFT-PUPIL//////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;

        context.beginPath();
        context.arc(479, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
/////////////RIGHT-PUPIL//////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;

        context.beginPath();
        context.arc(520, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
////////////LEFT-EYEBROW////////////////

  var x = 469;
  var y = 342;
  var x1 = 491;
  var y1 = y;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
  context.closePath();

///////////////RIGHT-EYEBROW///////////////

  var x = 510;
  var y = 342;
  var x1 = 532;
  var y1 = y;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.stroke();
  context.closePath();
 
///////////NECK///////////////////////

  var x = 500;
  var y = 396;
  var x1 = 500;
  var y1 = 410;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 22;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
////////////TORSO//////////////

  var x = 500;
  var y = 410;
  var x1 = 500;
  var y1 = 485;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
     
///////////////SWIM-SUIT////////////////

  var x = 500;
  var y = 485;
  var x1 = 500;
  var y1 = 515;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#FF0000";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#FF0000";
  context.stroke();
  context.closePath();
 
//////////////LEFT-LEG//////////////

  var x = 473;
  var y = 515;
  var x1 = 473;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
/////////////RIGHT-LEG////////////////

  var x = 527;
  var y = 515;
  var x1 = 527;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
////////////////LEF-FOOT/////////////////

  var x = 485.5;
  var y = 575;
  var x1 = 444;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 20;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7.5;

        context.beginPath();
        context.arc(444, 575, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();
 

///////////////RIGHT-FOOT///////////////

  var x = 514.5;
  var y = 575;
  var x1 = 556;
  var y1 = 575;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 20;
        context.strokeStyle = "#993300";
  context.stroke();
  context.closePath();
 
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7.5;

        context.beginPath();
        context.arc(556, 575, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();
 
////////////////ARMS///////////////

var x = 400;
  var y = 350;
  var x1 = 500;
  var y1 = 450;
  var x2 = 600;
  var y2 = 350;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineWidth = 20;
  context.strokeStyle = "#993300";
  context.lineCap = "round";
  context.stroke();
  context.closePath();
 
////////////LEFT-NIPPLE/////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 0.5;

        context.beginPath();
        context.arc(480, 435, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
     
///////////////RIGHT-NIPPLE/////////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 0.5;

        context.beginPath();
        context.arc(520, 435, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();

/////////////SURFBOARD/////////////

  var x = 160;
  var y = 310;
  var x1 = 160;
  var y1 = 530;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#006600";
        context.fill();
        context.lineWidth = 120;
        context.strokeStyle = "#006600";
  context.stroke();
  context.closePath();
 
////////////SURFBOARD//////////
 
  var x = 160;
  var y = 260;
  var x1 = 160;
  var y1 = 580;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 20;
        context.strokeStyle = "#000000";
  context.stroke();
  context.closePath();

/////////////TOWEL//////////////

context.beginPath();
context.rect(615, 340, 180, 250);
context.fillStyle = "#330066";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#0066CC";
context.stroke();
context.closePath();

///////////CAMERA/////////////

context.beginPath();
context.rect(670, 410, 70, 40);
context.fillStyle = "#000000";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#000000";
context.stroke();
context.closePath();

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 16;

        context.beginPath();
        context.arc(696, 430, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#CCFFFF";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#99CCCC";
        context.stroke();
        context.closePath();

context.beginPath();
context.rect(720, 414, 16, 8);
context.fillStyle = "#CCCCCC";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#CCCCCC";
context.stroke();
context.closePath();

//////////RADIO//////////

var x = 290;
  var y = 470;
  var x1 = 340;
  var y1 = 470;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.fillStyle = "#333333";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#333333";
  context.stroke();
  context.closePath();

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 25;

        context.beginPath();
        context.arc(285, 471, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 25;

        context.beginPath();
        context.arc(345, 471, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 2;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
var x = 362;
var y = 380;
var x1 = 350;
var y1 = 430;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
context.closePath();

context.beginPath();
context.rect(309, 439, 15, 4);
context.fillStyle = "#FF0000";
context.fill();
context.lineWidth = 6;
context.strokeStyle = "#FF0000";
context.stroke();
context.closePath();

////////////BIRDS////////////////

var x = 150;
  var y = 130;
  var x1 = 180;
  var y1 = 160;
  var x2 = 210;
  var y2 = 130;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineWidth = 2;
  context.strokeStyle = 'black';
  context.lineCap = "round";
  context.stroke();
 
 


     
////////////////////////////////////////////////////
   
      };

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

progress Feb 13, 2014.

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

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

////////////////////////////SKY///////////////

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 200;
     
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(800, 150, 800, 0);
        // STARTING COLOR
        grd.addColorStop(0, "#FF3300");
        // INTERMEDIATE COLOR
        grd.addColorStop(0.5, "#990000");
        // ENDING COLOR
        grd.addColorStop(1, "#660066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();

//////////////////////SEA/////////////

        var x = 0;
        var y = 200;
        var width = 800;
        var height = 100;
     
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(400, 200, 400, 300);
        // STARTING COLOR
        grd.addColorStop(1, "#00CCFF");
        // ENDING COLOR
        grd.addColorStop(0.25, "#000066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();
     
/////////////////////SAND/////////////

        context.beginPath();
        context.rect(0, 300, 800, 600);
        context.fillStyle = "#FFCC99";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFCC99";
        context.stroke();
        context.closePath();

//////////////////SUN/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 150;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(160, 200, radius, startangle, endangle, true);
        context.fillStyle = "#FF6600";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FF6600";
        context.stroke();
        context.closePath();
       
///////////////////MIDDLE-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 35;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(535, 110, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(535, 110, 5, 535, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
//////////////////BOTTOM-LEFT-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(500, 120, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
/////////////////////////MIDDLE-LEFT-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 90, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(470, 90, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

///////////////TOP-LEFT-CLOUD/////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(515, 60, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(515, 60, 5, 520, 80, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
/////////////MIDDLE-BOTTOM-CLOUD////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(570, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(570, 120, 5, 520, 80, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
//////////////RIGHT-BOTTOM-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(600, 105, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(600, 105, 5, 520, 80, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

//////////////HEAD//////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 45;

        context.beginPath();
        context.arc(500, 350, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();

////////////HAIR/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 42;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(500, 335, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
/////////////MOUTH///////////////

  var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 10;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 381, radius, startangle, endangle, true);
        context.fillStyle = "black";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
        context.closePath();
       
///////////////LEFT-NOSE///////////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(496, 371, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
/////////////////RIGHT-NOSE/////////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(505, 371, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
/////////////////LEFT-EYE///////////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7;

        context.beginPath();
        context.arc(479, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.closePath();

////////////RIGHT-EYE///////////////////


var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 7;

        context.beginPath();
        context.arc(520, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#FFFFFF";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFFFFF";
        context.stroke();
        context.closePath();
       
/////////////LEFT-PUPIL//////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;

        context.beginPath();
        context.arc(479, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
/////////////RIGHT-PUPIL//////////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 2;

        context.beginPath();
        context.arc(520, 352, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
////////////LEFT-EYEBROW////////////////

var x = 469;
var y = 342;
var x1 = 491;
var y1 = y;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
context.closePath();

///////////////RIGHT-EYEBROW///////////////

var x = 510;
var y = 342;
var x1 = 532;
var y1 = y;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();
context.closePath();

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

var x = 500;
var y = 396;
var x1 = 500;
var y1 = 410;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 22;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();

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

var x = 500;
var y = 410;
var x1 = 500;
var y1 = 485;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();

////////////LEFT-NIPPLE/////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 0.5;

        context.beginPath();
        context.arc(480, 435, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
///////////////RIGHT-NIPPLE/////////////////

var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 0.5;

        context.beginPath();
        context.arc(520, 435, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();
       
///////////////SWIM-SUIT////////////////

var x = 500;
var y = 485;
var x1 = 500;
var y1 = 515;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#FF0000";
        context.fill();
        context.lineWidth = 80;
        context.strokeStyle = "#FF0000";
context.stroke();
context.closePath();

//////////////LEFT-LEG//////////////

var x = 473;
var y = 515;
var x1 = 473;
var y1 = 575;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();

/////////////RIGHT-LEG////////////////

var x = 527;
var y = 515;
var x1 = 527;
var y1 = 575;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();

////////////////LEF-FOOT/////////////////

var x = 575;
var y = 400;
var x1 = 575;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 70;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();


///////////////RIGHT-FOOT///////////////

var x = 575;
var y = 400;
var x1 = 575;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 70;
        context.strokeStyle = "#993300";
context.stroke();
context.closePath();




/////////////TOWEL/////////////

var x = 180;
var y = 400;
var x1 = 400;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.fillStyle = "#FFCC33";
        context.fill();
        context.lineWidth = 120;
        context.strokeStyle = "#FFCC33";
context.stroke();
context.closePath();



     
////////////////////////////////////////////////////
   
      };

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

Progress: Feb 11,2014.

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

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

////////////////////////////SKY///////////////

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 200;
      
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(800, 150, 800, 0);
        // STARTING COLOR
        grd.addColorStop(0, "#FF3300");
        // INTERMEDIATE COLOR
        grd.addColorStop(0.5, "#990000");
        // ENDING COLOR
        grd.addColorStop(1, "#660066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();

//////////////////////SEA/////////////

        var x = 0;
        var y = 200;
        var width = 800;
        var height = 100;
      
        context.beginPath();
        context.rect(x,y,width,height);
        // context.fillStyle = 'green';
        // add linear gradient
        var grd = context.createLinearGradient(400, 200, 400, 300);
        // STARTING COLOR
        grd.addColorStop(1, "#00CCFF");
        // ENDING COLOR
        grd.addColorStop(0.25, "#000066");
        context.fillStyle = grd;
        context.fill();
        context.closePath();
      
/////////////////////SAND/////////////

        context.beginPath();
        context.rect(0, 300, 800, 600);
        context.fillStyle = "#FFCC99";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FFCC99";
        context.stroke();
        context.closePath();

//////////////////SUN/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 150;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(160, 200, radius, startangle, endangle, true);
        context.fillStyle = "#FF6600";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#FF6600";
        context.stroke();
        context.closePath();
       
///////////////////MIDDLE-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 35;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(535, 110, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(535, 110, 5, 535, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
//////////////////BOTTOM-LEFT-CLOUD///////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(500, 120, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
/////////////////////////MIDDLE-LEFT-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(500, 90, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(470, 90, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

///////////////TOP-LEFT-CLOUD/////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(515, 60, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(515, 60, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
/////////////MIDDLE-BOTTOM-CLOUD////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(570, 120, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(570, 120, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();
       
//////////////RIGHT-BOTTOM-CLOUD////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 2.5;
        var radius = 25;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(600, 105, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(600, 105, 5, 520, 110, 35);
        // STARTING COLOR
        grd.addColorStop(0.25, "#CCCCCC");
        // ENDING COLOR
        grd.addColorStop(0.75, "#FFFFFF");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.closePath();

//////////////HEAD//////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 45;

        context.beginPath();
        context.arc(500, 350, radius, 0, 2 * Math.PI, false);
        context.fillStyle = "#993300";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#993300";
        context.stroke();
        context.closePath();

////////////HAIR/////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 42;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(500, 335, radius, startangle, endangle, true);
        context.fillStyle = "#000000";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "#000000";
        context.stroke();
        context.closePath();






      
////////////////////////////////////////////////////
    
      };

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