Canvas Final- Hula Stitch




My final for the canvas project is a beach scene featuring Stitch from 'Lilo and Stitch' hula dancing. The background, cloud, sand, starfish, water, grass skirt, and Stitch were all made with the gradient effect. The cloud is a benzier curve, while everything else are quadratic curves. Stitch's nose, head, and nails and all the sand specks are circles. I learned how to understand the canvas as a coordinate graph, while not being able to see the points I was drawing. Towards the end, I was able to type out codes off the top of my head and the points would be partially accurate to the lines I wanted to make. I also learned how to be patient with what I was doing, and allowed myself to correct and work off my mistakes.

Hours: 12

Code:

//BACKGROUND

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.rect(0, 0, canvas.width, canvas.height);

      // create radial gradient

      var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
   
      grd.addColorStop(0, 'rgb(255, 255, 153)');
 grd.addColorStop(.25, 'rgb(255, 255, 128)');
      grd.addColorStop(1, 'rgb(153, 204, 255)');


      context.fillStyle = grd;
      context.fill();


//waves

var quad = context.createLinearGradient(200,500,400,400);

quad.addColorStop(0, "rgb(102, 204, 255)");
quad.addColorStop(1, "rgb(0, 204, 255)");

      context.beginPath();
      context.moveTo(0, 375);
      context.quadraticCurveTo(108, 350, 220, 375);
 context.quadraticCurveTo(280, 400, 400, 375);
 context.quadraticCurveTo(568, 350, 700, 375);
 context.quadraticCurveTo(808, 400, 820, 375);
 context.lineTo(805,480);
 context.lineTo(0,500);
 context.lineTo(0,375);
 context.closePath();
 context.fillStyle = quad;
 context.fill();

//Wave details

context.beginPath();
context.moveTo(10,390);
context.quadraticCurveTo(150,360,230,390);  //left
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();


context.beginPath();
context.moveTo(200,400);
context.quadraticCurveTo(350,450,410,410);  //middle left
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();

context.beginPath();
context.moveTo(700,390);
context.quadraticCurveTo(450,360,390,400);  //middle right
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();

context.beginPath();
context.moveTo(790,430);
context.quadraticCurveTo(650,410,550,420);  //right
context.lineWidth = 1;
context.strokeStyle = "rgb(179, 237, 255)";
context.stroke();

//sand

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(255, 245, 204)");

quad.addColorStop(1, "rgb(255, 230, 179)");

context.beginPath();
context.moveTo(0,448);
context.quadraticCurveTo(15,444,65,445);
context.quadraticCurveTo(67,420,97,420);
context.quadraticCurveTo(125,380,155,420);
context.quadraticCurveTo(205,425,209,452);
context.quadraticCurveTo(225,469,450,455);
context.quadraticCurveTo(530,440,800,455);
context.lineTo(795,795);
context.lineTo(0,600);
context.lineTo(0,448);
context.closePath();
context.fillStyle = quad;
context.fill();

//starfish

var quad = context.createLinearGradient(0,100,240,800);

quad.addColorStop(0, "red");

quad.addColorStop(1, "pink");

context.beginPath();
context.moveTo(135,400);
context.quadraticCurveTo(130,370,120,400); //top fin
context.quadraticCurveTo(85,390,115,408); //left fin
context.quadraticCurveTo(95,435,125,415); //bottom left fin
context.quadraticCurveTo(145,435,140,410); //bottom right fin
context.quadraticCurveTo(155,388,135,400); //top right fin
context.closePath();
context.fillStyle = quad;
context.fill();

//sand specks

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 2;

      context.beginPath(); //1st speck, upper right side
      context.arc(700, 500, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //2nd speck, upper left side
      context.arc(215, 500, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //3rd speck, middle left side
      context.arc(95, 532, 1.5, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //4th speck,on sand castle
      context.arc(112, 450, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //5th speck, upper left side
      context.arc(38, 480, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //6th speck, middle
      context.arc(438, 580, 2, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 context.beginPath(); //7th speck, bottom right side
      context.arc(640, 559, 1.5, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = '#D6B885';
      context.fill();

 //Stitch's left leg

var quad = context.createLinearGradient(200,200,400,600);

quad.addColorStop(0, "rgb(77, 136, 255)");

quad.addColorStop(1, "rgb(26, 102, 255)");

  context.beginPath();
context.moveTo(415,475);
context.quadraticCurveTo(410,490,415,508); //left line of leg
context.quadraticCurveTo(400,510,412,516); //left toe
context.quadraticCurveTo(410,520,420,520); //2nd toe
context.quadraticCurveTo(422,525,430,520); //3rd toe
context.quadraticCurveTo(444,522,434,508); //right toe
context.quadraticCurveTo(437,490,430,475); //right line of leg
context.lineTo(414,475);
context.closePath();
context.fillStyle = quad;
context.fill();

//Stitch left leg toenails

      context.beginPath(); // left toenail
      context.arc(410, 514, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = "rgb(0, 51, 153)";
      context.fill();

context.beginPath(); //2nd toenail
      context.arc(417, 520, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd toenail
      context.arc(425, 521, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //4th toenail
      context.arc(435, 519, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();


//Stitch's right leg

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(77, 136, 255)");

quad.addColorStop(1, "rgb(26, 102, 255)");

context.beginPath();
context.moveTo(449,477);
context.quadraticCurveTo(450,493,456,509); //left line of leg
context.quadraticCurveTo(440,513,453,518); //left toe
context.quadraticCurveTo(450,523,461,522); //2nd toe
context.quadraticCurveTo(462,528,471,522); //3rd toe
context.quadraticCurveTo(484,525,472,510); //right toe
context.quadraticCurveTo(477,500,460,470); //right line of leg
context.lineTo(449,478);
context.closePath();
context.fillStyle = quad;
context.fill();


//Stitch right leg toenails

      context.beginPath(); // left toenail
      context.arc(450, 516, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = "rgb(0, 51, 153)";
      context.fill();

context.beginPath(); //2nd toenail
      context.arc(456, 522, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd toenail
      context.arc(465, 524, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //4th toenail
      context.arc(476, 521, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();


//Stitch's body + right arm

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(77, 136, 255)");

quad.addColorStop(1, "rgb(26, 102, 255)");

context.beginPath();
context.moveTo(414,459);
context.quadraticCurveTo(400,465,460,460); //bottom torso
context.quadraticCurveTo(473,440,468,437); //right side of body line
context.quadraticCurveTo(480,445,495,440); //bottom line of right arm
context.quadraticCurveTo(503,455,505,442); //left finger
context.quadraticCurveTo(517,442,506,434); //2nd finger
context.quadraticCurveTo(510,423,496,431); //top finger
context.quadraticCurveTo(470,425,467,430); //top line of arm
context.quadraticCurveTo(457,418,419,428); //top line of body
context.quadraticCurveTo(410,438,415,445); //upper left part of body
context.closePath();

context.fillStyle = quad;
context.fill();

//Hand details

context.beginPath();
      context.arc(500, 437.5, 5, 1, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

//Hula grass skirt

var quad = context.createLinearGradient(100,100,400,600);

quad.addColorStop(0, "rgb(45, 134, 45)");

quad.addColorStop(1, "rgb(32, 96, 32)");

context.beginPath();
context.moveTo(413,460);
context.quadraticCurveTo(430,460,460,460); //top line
context.quadraticCurveTo(460,450,470,497); //right line
context.quadraticCurveTo(470,500,458,490); //right triangle
context.quadraticCurveTo(465,522,444,492); //2nd to the left
context.quadraticCurveTo(443,525,435,494); //middle
context.quadraticCurveTo(423,525,423,496); //2nd to the right
context.quadraticCurveTo(409,510,413,498); //left triangle
context.closePath();
context.fillStyle = quad;
context.fill();

//ear behind head

context.beginPath();
context.moveTo(425,400);
context.quadraticCurveTo(390,325,435,380);
context.closePath();
context.fillStyle = "rgb(26, 102, 255)";
context.fill();


//head
var quad = context.createLinearGradient(200,200,400,500);
quad.addColorStop(0, "rgb(77, 136, 255)");
quad.addColorStop(1, "rgb(26, 102, 255)");
context.beginPath();
context.arc(0, 0, 36.5, 0, 6.283185307179586, false);
context.closePath();
context.restore();
context.fillStyle = quad;
context.fill();

//left ear

context.beginPath();
context.moveTo(402,399);
context.quadraticCurveTo(350,335,415,386);
context.closePath();
context.fillStyle = "rgb(255, 153, 153)";
context.fill();
context.lineWidth = "2.2";
context.strokeStyle = "rgb(26, 102, 255)";
context.stroke();

//left arm + fingers

context.beginPath();
context.moveTo(416,431);
context.quadraticCurveTo(435,428,450,432); //top line of arm
context.quadraticCurveTo(463,421,457,435); //top finger
context.quadraticCurveTo(478,437,458,442); //middle finger
context.quadraticCurveTo(470,453,450,444); //bottom finger
context.quadraticCurveTo(445,449,414,443); //bottom line
context.closePath();
context.fillStyle = "rgb(26, 83, 255)";
context.fill();

//fingernails left hand

 context.beginPath(); //1st fingernail
      context.arc(457, 428, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //2nd fingernail
      context.arc(465, 438, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd fingernail
      context.arc(459, 446, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

 //fingernails right hand

context.beginPath(); //1st fingernail
      context.arc(506, 428, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //2nd fingernail
      context.arc(510, 439, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

context.beginPath(); //3rd fingernail
      context.arc(503, 448, 2.7, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

//Nose

context.beginPath();
      context.arc(470, 404, 6, 1, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'rgb(0, 51, 153)';
      context.fill();

//outer eye

context.beginPath();
context.moveTo(420,400);
context.quadraticCurveTo(420,420,458,409);
context.quadraticCurveTo(450,375,420,400);
context.closePath();
context.fillStyle = "rgb(179, 217, 255)";
context.fill();

//eye

context.beginPath();
context.moveTo(435,400);
context.quadraticCurveTo(435,412,450,407);
context.quadraticCurveTo(445,388,435,400);
context.fillStyle = "black";
context.fill();

//eye detail

context.beginPath();
      context.arc(441, 400, 2.6, 2, 2 * Math.PI, false);
 context.closePath();
      context.fillStyle = 'white';
      context.fill();


//cloud

var quad = context.createLinearGradient(100,400,400,900);

quad.addColorStop(0, "white");

quad.addColorStop(1, "gray");

context.beginPath();
      context.moveTo(590, 170);
      context.bezierCurveTo(610, 120, 630, 100, 650, 170);
      context.bezierCurveTo(650, 150, 670, 130, 680, 170);
      context.bezierCurveTo(740, 190, 700, 210, 690, 220);
      context.bezierCurveTo(820, 230, 610, 320, 550, 250);
      context.bezierCurveTo(500, 220, 475, 100, 590, 180);
      context.closePath();
      context.fillStyle = quad;
      context.fill();
   

Comments

Post a Comment

Popular posts from this blog

Business Card Final

Image
Here are my *updated* and completed 5 business cards depicting: -Animal Lover -Compassionate -Curious -Creative -Adventurous I enjoyed created all of these but probably like animal lover best because it was fun to create the dog and cat. I t took me a while to finalize what I wanted to choose for my final logos. I played with them a lot, and decided I wanted them to be coherent with each other through their design and style. I really loved how they came out, simple but matching. I was able to use faces and eyes mutiple times which was nice. Making them colorful and pretty also took a long time but it was work it. I used Adobe Illustartor for this project.
Read more

Black and White To Color Project

Image
In Adobe Ilustrator, I chose a picture from my high school graduation and made it black and white. Then, I used the paint tool and started to color on myself. I zoomed in a lot to make sure I could color in the details in order for it to look realistic. I darkened my cap and robe to keep a color theme going, and added black lipstick with black ‘paint’. I then added a nose piercing and eyebrow piercing to top off the punk look. I made the background purple because I, again, wanted to maintain a color theme. I had a lot of fun with this project.  
Read more

Mesh Final Project

Image
I really enjoyed the mesh project because it felt like I was designing a video game object. I first searched for an object in my room that would best show reflections, and have a change in colors to depict depth. I came across this water bottle and knew it was perfect. I used Adobe Illustrator and used the mesh tool to create the outlines of the water bottle to depict depth and shape, and placed them on top of the image following lines and highlights of the image. I then used the eyedropper tool to transfer the exact colors from the image of the bottle to my project. This part was the most time consuming, but also fun because attention to detail was key, so I had to really pay attention to the exact placement of the colors I was taking and where I was putting them to make it look as identical as I could to the actual bottle. I then separately created the lid using the same technique. I’m proud of my results and how realistic is looks.  
Read more