Final Portfolio

This is my final portfolio. I am proud of the way it turned out. I stuck with 2 fonts. The color scheme I used consisted primarily of black, white and purple. I provided a link to the Final Portfolio below as well as images of the pages: 

 

 Link to Final Portfolio

Animation

In my opinion, this was the hardest assignment we had to do this semester. Even doing this simple animation was very time consuming, but it was interesting to learn about the process of animation. 

First were the storyboards. My storyboards were not very detailed but the do resemble my final project:

Next is the Animatic. The only problem I had here was my story boards would not fit to a 1280 x 720, but it didn't cause very many problem in the long run:

This is my final animation project. Considering it is the first time I have working with any type of animation program, I am pretty happy with the way it turned out.

Lyrical Collage

The quote I chose was "Thomas Edison's last words were 'It's very beautiful over there.' I don't know where there is, but I believe it's somewhere, and I hope it's beautiful." By John Green from his novel Looking for Alaska. John Green is one of my favorite writers. This quote in particular is mysterious and touching on various different levels, for various different reasons. My goal was the keep the Collage simple, but also give it a fantasy type feel.  

I used this picture I took of the sun setting in the Everglades. I enhanced the colors significantly so the picture was more vibrant and intense. 

I took a picture of a starry sky off of google and placed it in the sky only, which involved separating the image into various sections. 

I used the following image that I took at the beach to add the sand to the bottom of the overall collage.

I used this image of the butterfly I took and used the puppet warp tool to change it's position slightly. I duplicated it and made it smaller and lowered the opacity on each as it goes up the side of the screen to make it seem like the butterfly was flying away. 

This image of the moon was taken by my friend through a telescope. I used it in the sky (putting it on a layer above the actual sky and behind the stars) to give the sky a little more of a fantasy feel. 

This is a picture of me from when I went to Paris. I used this image because, while I am mostly in shadow, some details can be seen. It blended pretty well with the over all lighting of my image. 

This is my final product. I am very happy with it. I made the words 'and I hope it's beautiful.' larger and gave them a higher opacity to make them stand out. I almost didn't add the words, but I thought they were important for the image as a whole. 

Custom Graphic

I went for sort of a fantasy feel with my graphic. First I took and image of wood and created a pattern for the floor. I altered the perspective of the floor to make it look like the viewer was standing against one wall and looking at the other three. I made the image with the tree and then separated it into rectangles, which I then manipulates around the floor. I made the blue wall using one of the brushstrokes and the color dynamics setting. The girl in the picture was traced from an photo of a poster I have on my wall (this is also how I drew the tree). The butterflies are a brush design that I created from an image as well. The tracing took the longest. I did not have time to borrow a tablet to do the tracing and I think it would have turned out nicer if I did. Experimenting with the various brush styles and seeing what worked for what situation was fun. It turned out differently then I pictured it in my head, but overall I am happy with it.

Magazine Cover

For my Magazine cover I chose to imitate Dance Magazine using pictures of my sister and her friend. There are a few major differences from the actual Dance Magazine cover. Typically the magazine will use only one image of the featured dance. I added the sidebar to create a way to add images to meet the requirements of the assignment while also keeping unity in the overall product. I also put lines under the titles of the articles to further establish unity in the magazine cover. I extracted the larger image of my sister because the original Dance Magazine typically uses color (or colors) for their backgrounds. I have included the original image as well as the final product. I adjusted the pictures slightly as well. I kept the title of the magazine almost exactly the same (with slight size alterations).

Self Insertion Assignment

The goal of this assignment was to place ourselves in a place we have never been before.

Here are the original images:

And here is the final product:

HTML5 Illustration

For my HTML5 illustration I chose to do an image of Baymax from Big Hero 6 with a silhouette of the 'San Fransokyo' bridge (the setting of the movie) in the background. First, I placed the reference image of Baymax on the grid in illustrator. Once I completed the code for Baymax, I placed the bridge over him on the graph and lowered the opacity to determine spacing. 

This is the finished product.

After completing Baymax and the bridge, I thought the image looked a little silly because Baymax appeared to be floating. In order to correct this, I use rectangles to create a simple silhouette of a city skyline beneath him so he appeared to be standing on a building. I made the background a red gradient which gradually gets darker towards the bottom in order to represent the posters I have seen for the movie which use the colors red, black, and white. In addition, there are a few differences between my Baymax and the original image. I added shadows to give Baymax more of a three dimensional appearance and made some of the darker markings on Baymax slightly different sizes. Once this was completed, I noticed the overall image seemed a bit unbalanced. As a result, I added Baymax's 'catchphrase'  "Hello. I am Baymax, your personal healthcare companion." This phrase not only balances out the image out, but fits with the picture as a whole. There are a few things that could be improved, for example I couldn't quite get the head to be as symmetrical as the original image, but overall I am happy with the outcome. This was the first time I have worked with HTML and, while it is not my favorite method of designing a digital image, I am glad that I now have a better understanding of how to use it.

**Neither of the reference images are mine. I simply used them to approximate points*

Here is the code for my image:

<!DOCTYPE HTML>

<html>

<head>

<script>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

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

//Rectangle Variables

var startx = 0;

var starty = 0;

var width = 800;

var height = 600;

//Gradient Variables

var grdstartx = 400;

var grdstarty = 0;

var grdendx = 400;

var grdendy = 600;

context.beginPath();

context.rect(startx, starty, width, height);

context.lineWidth = 0;

var grd = context.createLinearGradient(grdstartx, grdstarty, grdendx, grdendy);

grd.addColorStop(0, 'rgb(200, 0, 0)');

grd.addColorStop(.3, 'rgb(120, 0, 0)');

grd.addColorStop(.7, 'rgb(95, 0, 0)');

grd.addColorStop(.8, 'rgb(70, 0, 0)');

grd.addColorStop(1, 'rgb(60, 0, 0)');

context.fillStyle = grd;

context.fill();

//bridge

var x41 = 415;

var y41 = 25;

var controlx40 = 600;

var controly40 = 100;

var endx40 = 775;

var endy40 = 25;

var controlx41 = 775;

var controly41 = 75;

var endx41 = 625;

var endy41 = 77;

var endx42 = 500;

var endy42 = 77;

var controlx42 = 425;

var controly42 = 68;

var startx = 485;

var starty = 65;

var width = 10;

var height = 550;

var startx2 = 675;

var starty2 = 65;

var width2 = 10;

var height2 = 550;

context.beginPath();

context.rect(startx, starty, width, height);

context.lineWidth = 10;

context.fillStyle = 'rgb(0, 0, 0)'

context.fill();

context.stroke();

context.beginPath();

context.rect(startx2, starty2, width2, height2);

context.lineWidth = 10;

context.fillStyle = 'rgb(0, 0, 0)'

context.fill();

context.stroke();

context.beginPath();

context.moveTo(x41, y41);

context.quadraticCurveTo(controlx40, controly40, endx40, endy40)

context.quadraticCurveTo(controlx41, controly41, endx41, endy41)

context.lineTo(endx42, endy42);

context.quadraticCurveTo(controlx42, controly42, x41, y41)

context.fillStyle = 'rgb(0, 0, 0)'

context.lineWidth = 2;

context.fill();

context.stroke();

var x45 = 437;

var y45 = 212;

var controlx43 = 600;

var controly43 = 250;

var endx48 = 765;

var endy48 = 212;

var controlx44 = 750;

var controly44 = 250;

var endx46 = 735;

var endy46 = 250;

var endx47 = 450;

var endy47 = 250;

var controlx45 = 448;

var controly45 = 252;

context.beginPath();

context.moveTo(x45, y45);

context.quadraticCurveTo(controlx43, controly43, endx48, endy48)

context.quadraticCurveTo(controlx44, controly44, endx46, endy46)

context.lineTo(endx47, endy47);

context.quadraticCurveTo(controlx45, controly45, x45, y45)

context.fillStyle = 'rgb(0, 0, 0)'

context.lineWidth = 2;

context.fill();

context.stroke();

var x49 = 425;

var y49 = 386;

var controlx46 = 450;

var controly46 = 420;

var endx50 = 500;

var endy50 = 420;

var endx51 = 700;

var endy51 = 420;

var controlx47 = 725;

var controly47 = 425;

var endx52 = 767;

var endy52 = 385;

var controlx48 = 750;

var controly48 = 450;

var endx53 = 700;

var endy53 = 450;

var endx54 = 500;

var endy54 = 450;

var x50 = 485;

var y50 = 65;

var endx55 = 0;

var endy55 = 565;

var x51 = 685;

var y51 = 65;

var endx56 = 800;

var endy56 = 175;

var endy57 = 600;

context.beginPath();

context.moveTo(x49, y49);

context.quadraticCurveTo(controlx46, controly46, endx50, endy50)

context.lineTo(endx51, endy51);

context.quadraticCurveTo(controlx47, controly47, endx52, endy52)

context.quadraticCurveTo(controlx48, controly48, endx53, endy53)

context.lineTo(endx54, endy54);

context.fillStyle = 'rgb(0, 0, 0)'

context.lineWidth = 2;

context.fill();

context.stroke();

//Bridge Lines

context.beginPath();

context.moveTo(x50, y50);

context.lineTo(endx55, endy55);

context.lineWidth = 7;

context.stroke();

context.beginPath();

context.moveTo(x51, y51);

context.lineTo(endx56, endy56);

context.lineWidth = 7;

context.lineCap = 'round'

context.stroke();

context.beginPath();

context.moveTo(475, 50);

context.lineTo(475, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(450, 100);

context.lineTo(450, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(425, 124);

context.lineTo(425, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(400, 148);

context.lineTo(400, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(375, 175);

context.lineTo(375, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(350, 200);

context.lineTo(350, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(325, 225);

context.lineTo(325, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(300, 250);

context.lineTo(300, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(275, 280);

context.lineTo(275, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(250, 310);

context.lineTo(250, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(225, 326);

context.lineTo(225, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(200, 353);

context.lineTo(200, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(175, 387);

context.lineTo(175, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(150, 410);

context.lineTo(150, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(125, 440);

context.lineTo(125, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(100, 462);

context.lineTo(100, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(75, 490);

context.lineTo(75, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(50, 515);

context.lineTo(50, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(25, 535);

context.lineTo(25, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(705, 80);

context.lineTo(705, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(725, 108);

context.lineTo(725, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(750, 125);

context.lineTo(750, endy57);

context.lineWidth = 2;

context.stroke();

context.beginPath();

context.moveTo(775, 150);

context.lineTo(775, endy57);

context.lineWidth = 2;

context.stroke();

//City

var startx3 = 285;

var starty3 = 580;

var width3 = 251;

var height3 = 550;

context.beginPath();

context.rect(startx3, starty3, width3, height3);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx4 = 536;

var starty4 = 530;

var width4 = 200;

var height4 = 550;

context.beginPath();

context.rect(startx4, starty4, width4, height4);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx5 = 736;

var starty5 = 560;

var width5 = 200;

var height5 = 550;

context.beginPath();

context.rect(startx5, starty5, width5, height5);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx6 = 185;

var starty6 = 550;

var width6 = 100;

var height6 = 550;

context.beginPath();

context.rect(startx6, starty6, width6, height6);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx7 = 65;

var starty7 = 515;

var width7 = 120;

var height7 = 550;

context.beginPath();

context.rect(startx7, starty7, width7, height7);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

var startx8 = 0;

var starty8 = 540;

var width8 = 65;

var height8 = 550;

context.beginPath();

context.rect(startx8, starty8, width8, height8);

context.lineWidth = 1;

context.fillStyle = 'rgb(0, 0, 5)'

context.fill();

context.stroke();

//Left arm

var xx = 305;

var yy = 177;

var controlx5 = 150;

var controly5 = 300;

var endx5 = 203;

var endy5 = 462;

var controlx6 = 235;

var controly6 = 524;

var endx6 = 286;

var endy6 = 500;

var controlx7 = 390;

var controly7 = 490;

context.beginPath();

context.moveTo(xx, yy);

context.quadraticCurveTo(controlx5, controly5, endx5, endy5)

context.quadraticCurveTo(controlx6, controly6, endx6, endy6)

context.quadraticCurveTo(controlx7, controly7, xx, yy)

context.fillStyle = 'rgb(255, 255, 255)'

context.lineWidth = 10;

context.fill();

context.stroke();

//right arm

var aa = 500;

var bb = 250;

var xcontrol = 625;

var ycontrol = 200;

var xend = 637;

var yend = 100;

var c = 647;

var d = 1;

var e = 575;

var f = 12;

var xcontrol2 = 548;

var ycontrol2 = 13;

var xend2 = 529;

var yend2 = 50;

var xcontrol3 = 548;

var ycontrol3 = 13;

var xend3 = 473;

var yend3 = 150;

var xcontrol4 = 400;

var ycontrol4 = 150;

var xend4 = 400;

var yend4 = 150;

context.beginPath();

context.moveTo(aa, bb);

context.quadraticCurveTo(xcontrol, ycontrol, xend, yend);

context.quadraticCurveTo(c, d, e, f);

context.quadraticCurveTo(xcontrol2, ycontrol2, xend2, yend2);

context.quadraticCurveTo(xcontrol3, ycontrol3, xend3, yend3);

context.quadraticCurveTo(xcontrol4, ycontrol4, xend4, yend4);

context.lineTo(aa, bb);

context.fillStyle = 'rgb(255, 255, 255)'

context.lineWidth = 10;

context.fill();

context.stroke();

//left leg

var a3 = 275;

var b3 = 425;

var xcontrol5 = 263;

var ycontrol5 = 555;

var xend5 = 350;

var yend5 = 575;

var xcontrol6 = 433;

var ycontrol6 = 585;

var xend6 = 400;

var yend6 = 425;

context.beginPath();

context.moveTo(a3, b3);

context.quadraticCurveTo(xcontrol5, ycontrol5, xend5, yend5);

context.quadraticCurveTo(xcontrol6, ycontrol6, xend6, yend6);

context.lineTo(a3, b3);

context.fillStyle = 'rgb(255, 255, 255)'

context.lineWidth = 10;

context.fill();

context.stroke();

//right leg

var a4 = 536;

var b4 = 400;

var xcontrol7 = 551;

var ycontrol7 = 570;

var xend7 = 450;

var yend7 = 575;

var xcontrol8 = 350;

var ycontrol8 = 577;

var xend8 = 453;

var yend8 = 300;

context.beginPath();

context.moveTo(a4, b4);

context.quadraticCurveTo(xcontrol7, ycontrol7, xend7, yend7);

context.quadraticCurveTo(xcontrol8, ycontrol8, xend8, yend8);

context.lineTo(a4, b4);

context.fillStyle = 'rgb(255, 255, 255)'

context.lineWidth = 10;

context.fill();

context.stroke();

//right leg marking

var legx = 535;

var legy = 445;

var controllegx = 540;

var controllegy = 475;

var endx20 = 525;

var endy20= 510;

var controllegx2 = 475;

var controllegy2 = 475;

context.beginPath();

context.moveTo(legx, legy);

context.quadraticCurveTo(controllegx, controllegy, endx20, endy20)

context.quadraticCurveTo(controllegx2, controllegy2, legx, legy)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//left leg marking

var legx2 = 275;

var legy2 = 425;

var controllegx3 = 277;

var controllegy3 = 490;

var endx21 = 287;

var endy21= 516;

var controllegx4 = 350;

var controllegy4 = 450;

context.beginPath();

context.moveTo(legx2, legy2);

context.quadraticCurveTo(controllegx3, controllegy3, endx21, endy21)

context.quadraticCurveTo(controllegx4, controllegy4, legx2, legy2)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//body

var a = 450;

var b = 150;

var controlx8= 500;

var controly8= 152;

var endx7 = 515;

var endy7 = 275;

var controlx9= 615;

var controly9= 400;

var endx8 = 500;

var endy8 = 473;

var controlx10= 387;

var controly10= 538;

var endx9 = 276;

var endy9 = 450;

var controlx11= 210;

var controly11= 380;

var endx10 = 296;

var endy10 = 270;

var controlx12= 287;

var controly12= 225;

var endx11 = 325;

var endy11 = 175;

var controlx13= 357;

var controly13= 125;

context.beginPath();

context.moveTo(a, b);

context.quadraticCurveTo(controlx8, controly8, endx7, endy7)

context.quadraticCurveTo(controlx9, controly9, endx8, endy8)

context.quadraticCurveTo(controlx10, controly10, endx9, endy9)

context.quadraticCurveTo(controlx11, controly11, endx10, endy10)

context.quadraticCurveTo(controlx12, controly12, endx11, endy11)

context.quadraticCurveTo(controlx12, controly12, a, b)

context.fillStyle = 'rgb(255, 255, 255)'

context.lineWidth = 10;

context.fill();

context.stroke();

//body markings left

var markx2 = 306;

var marky2 = 214;

var controlx16= 293;

var controly16= 234;

var endx13 = 299;

var endy13 = 270;

var controlx17= 262;

var controly17= 312;

var endx14 = 258;

var endy14 = 340;

var controlx18= 350;

var controly18= 325;

context.beginPath();

context.moveTo(markx2, marky2);

context.quadraticCurveTo(controlx16, controly16, endx13, endy13)

context.quadraticCurveTo(controlx17, controly17, endx14, endy14)

context.quadraticCurveTo(controlx18, controly18, markx2, marky2)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//body markings right

var markx3 = 495;

var marky3 = 200;

var controlx19= 506;

var controly19= 224;

var endx15 = 515;

var endy15 = 275;

var controlx20= 535;

var controly20= 300;

var endx16 = 553;

var endy16 = 345;

var controlx21= 450;

var controly21= 300;

context.beginPath();

context.moveTo(markx3, marky3);

context.quadraticCurveTo(controlx19, controly19, endx15, endy15)

context.quadraticCurveTo(controlx20, controly20, endx16, endy16)

context.quadraticCurveTo(controlx21, controly21, markx3, marky3)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//circle on body

var centerx = 450;

var centery = 225;

var radius = 20;

var accesslx = 430;

var accessly = 225;

var accesslx2 = 440;

var accesslx3 = 446;

var accessly3 = 215;

var accesslx4 = 456;

var accesslx5 = 461;

var accesslx6 = 470;

context.beginPath();

context.arc(centerx, centery, radius, 0, 2*Math.PI, true);

context.lineWidth = 3;

context.fillStyle = 'rgb(255, 255, 255)';

context.closePath();

context.fill();

context.stroke();

context.beginPath();

context.moveTo(accesslx, accessly);

context.lineTo(accesslx2, accessly);

context.lineTo(accesslx2, accessly);

context.lineTo(accesslx3, accessly3);

context.lineTo(accesslx4, accessly3);

context.lineTo(accesslx5, accessly);

context.lineTo(accesslx6, accessly);

context.lineWidth = 2;

context.stroke();

//Head

var x = 400;

var y = 195;

var controlx = 275;

var controly = 225;

var endx = 289;

var endy = 125;

var controlx2 = 315;

var controly2 = 30;

var endx2 = 420;

var endy2 = 49;

var controlx3 = 490;

var controly3 = 70;

var endx3 = 473;

var endy3 = 138;

var controlx4 = 450;

var controly4 = 180;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(controlx, controly, endx, endy)

context.quadraticCurveTo(controlx2, controly2, endx2, endy2)

context.quadraticCurveTo(controlx3, controly3, endx3, endy3)

context.quadraticCurveTo(controlx4, controly4, x, y)

context.fillStyle = 'rgb(255, 255, 255)'

context.lineWidth = 10;

context.fill();

context.stroke();

//left eye

var centerx = 330;

var centery = 135;

var radius = 11;

context.beginPath();

context.arc(centerx, centery, radius, 0, 2*Math.PI, true);

context.lineWidth = 6;

context.fillStyle = 'rgb(0, 0, 0)';

context.closePath();

context.fill();

context.stroke();

//right eye

var centerx2 = 425;

var centery2 = 102;

var radius2 = 11;

context.beginPath();

context.arc(centerx2, centery2, radius2, 0, 2*Math.PI, true);

context.lineWidth = 6;

context.fillStyle = 'rgb(0, 0, 0)';

context.closePath();

context.fill();

context.stroke();

context.beginPath();

context.moveTo(centerx, centery);

context.lineTo(centerx2, centery2);

context.lineWidth = 4;

context.stroke();

//left arm marking

var markx = 198;

var marky = 337;

var controlx14 = 200;

var controly14 = 300;

var endx12 = 245;

var endy12 = 240;

var controlx15 = 275;

var controly15 = 325;

context.beginPath();

context.moveTo(markx, marky);

context.quadraticCurveTo(controlx14, controly14, endx12, endy12)

context.quadraticCurveTo(controlx15, controly15, markx, marky)

context.fillStyle = 'rgb(227, 215, 212)'

context.lineWidth = 2;

context.fill();

context.stroke();

//Shadow1

var shx = 350;

var shy = 475;

var controlx25 = 262;

var controly25 = 450;

var endx25 = 263;

var endy25 = 375;

var controlx26 = 300;

var controly26 = 450;

context.beginPath();

context.moveTo(shx, shy);

context.quadraticCurveTo(controlx25, controly25, endx25, endy25)

context.quadraticCurveTo(controlx26, controly26, shx, shy)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow2

var shx2 = 386;

var shy2 = 55;

var controlx27 = 440;

var controly27 = 50;

var endx26 = 463;

var endy26 = 100;

var controlx28 = 450;

var controly28 = 75;

context.beginPath();

context.moveTo(shx2, shy2);

context.quadraticCurveTo(controlx27, controly27, endx26, endy26)

context.quadraticCurveTo(controlx28, controly28, shx2, shy2)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow3

var shx3 = 525;

var shy3 = 225;

var controlx29 = 650;

var controly29 = 150;

var endx29 = 625;

var endy29 = 50;

var controlx30 = 625;

var controly30 = 125;

context.beginPath();

context.moveTo(shx3, shy3);

context.quadraticCurveTo(controlx29, controly29, endx29, endy29)

context.quadraticCurveTo(controlx30, controly30, shx3, shy3)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow4

var shx4 = 300;

var shy4 = 525;

var controlx31 = 325;

var controly31 = 565;

var endx30 = 350;

var endy30 = 563;

var controlx32 = 325;

var controly32 = 550;

context.beginPath();

context.moveTo(shx4, shy4);

context.quadraticCurveTo(controlx31, controly31, endx30, endy30)

context.quadraticCurveTo(controlx32, controly32, shx4, shy4)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow5

var shx5 = 415;

var shy5 = 525;

var controlx33 = 420;

var controly33 = 575;

var endx31 = 462;

var endy31 = 560;

var controlx34 = 425;

var controly34 = 560;

context.beginPath();

context.moveTo(shx5, shy5);

context.quadraticCurveTo(controlx33, controly33, endx31, endy31)

context.quadraticCurveTo(controlx34, controly34, shx5, shy5)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//shadow6

var shx6 = 200;

var shy6 = 350;

var controlx35 = 210;

var controly35 = 475;

var endx32 = 250;

var endy32 = 500;

var controlx36 = 190;

var controly36 = 455;

context.beginPath();

context.moveTo(shx6, shy6);

context.quadraticCurveTo(controlx35, controly35, endx32, endy32)

context.quadraticCurveTo(controlx36, controly36, shx6, shy6)

context.fillStyle = 'rgba(0, 0, 0, .08)'

context.strokeStyle = 'rgba(173, 161, 158, .08)'

context.fill();

context.stroke();

//Quote

context.font = 'bold 18pt Chalkduster';

context.fillStyle = 'rgb(255, 255, 255)';

context.fillText('"Hello. I am Baymax,', 5, 80);

context.font = 'bold 18pt Chalkduster';

context.fillText('your personal', 30, 120);

context.fillText('healthcare', 50, 160);

context.fillText('companion."', 70, 200);

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

};

</script>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

</body>

</html>