#1 Canvas

 

My project was created with HTML 5 Canvas in Dreamweaver to create Perry the Platypus from the show Phineas and Ferb. I drew inspiration from the two images below. I wanted to create Perry because Phineas and Ferb has always been one of my favorite cartoons and I think Perry is really cute, I thought it would be fun to create him in my own vision. I played around with the shapes and fillings and ended up leaving the arms, legs, and feet unfilled. I also left the shapes more straight-lined and boxy rather than curved because I liked the abstractness of it and how it looked less cartoony.

Since this was my first time using Dreamweaver and I spent so much time playing around the shapes trying to figure out exactly what I wanted it to look like, it took me about 18-20 hours and there is still more that I would have like to do with the background. I had a lot of challenges with the shape of the mouth and the quadratic curve. I also struggled with the proportions of his body, I had to move the x,y value points multiple times for each body part. Although it was very challenging I had a lot of fun creating it. Overall I am happy with how Perry looks, but I do wish I had allowed myself more time to add a background with buildings and clouds using bezier curves.

   

Code:

//tail var x=225; var y=470; var width = 90 var height= 140; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 1; context.fillStyle = "rgba(255,177,40,1.00)"; context.strokeStyle = "rgba(214,135,0,1.00)"; context.fill(); context.stroke(); //body var x=255; var y=400; var width = 90 var height= 210; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 1; context.fillStyle = 'rgba(8,141,113,1.00)'; context.strokeStyle = 'rgba(0,135,111,1.00)'; context.fill(); context.stroke(); //right arm exterior context.beginPath(); context.moveTo(265,470) context.lineTo(240, 500); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //right forearm exterior context.beginPath(); context.moveTo(240,500) context.lineTo(280, 495); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //right arm interior context.beginPath(); context.moveTo(268,480) context.lineTo(255, 490); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //right forearm interior context.beginPath(); context.moveTo(255,490) context.lineTo(280, 488); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //outter eye left var centerX = 335; var centerY = 407 var radius = 20; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "rgba(255,255,255,1.00)"; context.fill(); context.lineWidth = 1; context.strokeStyle = "rgba(3,3,3,1.00)"; context.stroke(); //right hand var x=280; var y=476; var width = 15 var height= 20; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 2; context.fillStyle = 'rgba(8,141,113,1.00)'; context.strokeStyle = 'rgba(4,4,4,1.00)'; context.fill(); context.stroke(); context.beginPath(); context.moveTo(295,485) context.lineTo(288, 485); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE context.beginPath(); context.moveTo(288,481) context.lineTo(288, 489); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left arm exterior context.beginPath(); context.moveTo(345,470) context.lineTo(365,465); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left forearm exterior context.beginPath(); context.moveTo(365,465) context.lineTo(372,488); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left arm interior context.beginPath(); context.moveTo(345,480) context.lineTo(360,475); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left forearm interior context.beginPath(); context.moveTo(360,475) context.lineTo(365, 488); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left hand var x=354; var y=488; var width = 20 var height= 15; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 2; context.fillStyle = 'rgba(8,141,113,1.00)'; context.strokeStyle = 'rgba(4,4,4,1.00)'; context.fill(); context.stroke(); context.beginPath(); context.moveTo(354,493) context.lineTo(363, 495); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE context.beginPath(); context.moveTo(363,491) context.lineTo(363, 498); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //right leg exterior context.beginPath(); context.moveTo(265,570) context.lineTo(260, 640); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //right leg interior context.beginPath(); context.moveTo(260,640) context.lineTo(275, 610); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //right foot context.beginPath(); context.moveTo(275,610) context.lineTo(280, 660); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(268,625) context.lineTo(266, 641); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE //right toe context.beginPath(); context.moveTo(266,641) context.lineTo(260, 645); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(260,645) context.lineTo(268, 648); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(272,655) context.lineTo(263, 665); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(280,660) context.lineTo(272, 655); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(263,665) context.lineTo(268, 648); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE //left leg exterior context.beginPath(); context.moveTo(340,580) context.lineTo(355, 560); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left leg exterior context.beginPath(); context.moveTo(355,560) context.lineTo(345, 630); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left leg interior context.beginPath(); context.moveTo(330,590) context.lineTo(335, 645); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = 'rgba(2,2,2,1.00)'; context.stroke(); // STROKE //left foot context.beginPath(); context.moveTo(330,650) context.lineTo(365, 600); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(330,650) context.lineTo(390, 630); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE //left toe context.beginPath(); context.moveTo(365,600) context.lineTo(368, 610); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(368,610) context.lineTo(385, 611); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(385,611) context.lineTo(380, 625); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE context.beginPath(); context.moveTo(380,625) context.lineTo(390, 630); context.lineWidth = 3; // STROKE WIDTH context.strokeStyle = "rgba(255,177,40,1.00)";; context.stroke(); // STROKE //iris left var centerX = 330; var centerY = 407 var radius = 8; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "rgba(98,57,57,1.00)"; context.fill(); context.lineWidth = 1; context.strokeStyle = "rgba(3,3,3,1.00)"; context.stroke(); //inner eye left var centerX = 330; var centerY = 407 var radius = 3; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "#FBFBFD"; context.fill(); context.lineWidth = 1; context.strokeStyle = "#000000"; context.stroke(); //eyebrow left horizantal context.beginPath(); context.moveTo(315,407) context.lineTo(355, 400); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(1,1,1,1.00)'; context.stroke(); // STROKE //eyebrow left vertical context.beginPath(); context.moveTo(315,407) context.lineTo(325, 400); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(1,1,1,1.00)'; context.stroke(); // STROKE //outter eye right var centerX = 265; var centerY = 407 var radius = 20; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "rgba(255,255,255,1.00)"; context.fill(); context.lineWidth = 1; context.strokeStyle = "rgba(3,3,3,1.00)"; context.stroke(); //iris right var centerX = 270; var centerY = 407 var radius = 8; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "rgba(98,57,57,1.00)"; context.fill(); context.lineWidth = 1; context.strokeStyle = "rgba(3,3,3,1.00)"; context.stroke(); //inner eye right var centerX = 270; var centerY = 407 var radius = 3; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "#FBFBFD"; context.fill(); context.lineWidth = 1; context.strokeStyle = "#000000"; context.stroke(); //eyebrow right horizantal context.beginPath(); context.moveTo(285,407) context.lineTo(245, 400); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(1,1,1,1.00)'; context.stroke(); // STROKE //eyebrow right vertical context.beginPath(); context.moveTo(285,407) context.lineTo(275, 400); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'rgba(1,1,1,1.00)'; context.stroke(); // STROKE //bill bottom var centerX = 300; var centerY = 432; var radius = 20; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "rgba(255,173,0,1.00)"; context.fill(); context.lineWidth = 5; context.strokeStyle = "rgba(214,135,0,1.00)"; context.stroke(); //bill context.beginPath(); // begin a shape context.moveTo(285,438); // point A coordinates context.lineTo(315,438); // point B coords context.lineTo(300,415); // point C coords context.closePath(); // close the shape context.lineWidth = 5; context.lineJoin = "round"; context.strokeStyle = "rgba(214,135,0,1.00)"; context.stroke(); context.fillStyle = "rgba(255,177,40,1.00)"; context.fill(); // Quad Curve Bill //starting point coordinates var x = 245; var y = 465; // control point coordinates ( magnet ) var cpointX = canvas.width / 2 - 0; var cpointY = canvas.height / 2 - 0; // ending point coordinates var x1 = 355; var y1 = 465; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(cpointX, cpointY, x1, y1); context.lineWidth = 10; context.strokeStyle = "rgba(214,135,0,1.00)"; context.stroke(); context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(cpointX, cpointY, x1, y1); context.lineWidth = 10; context.strokeStyle = "rgba(255,173,0,1.00)"; context.stroke(); //bill context.beginPath(); // begin a shape context.moveTo(257,360); // point A coordinates context.lineTo(343,360); // point B coords context.lineTo(300,340); // point C coords context.closePath(); // close the shape context.lineWidth = 5; context.lineJoin = "round"; context.strokeStyle = "rgba(121,64,43,1.00)"; context.stroke(); context.fillStyle = "rgba(121,64,43,1.00)"; context.fill(); //hat var x=255; var y=360; var width = 90; var height= 20; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 1; context.fillStyle = "rgba(121,64,43,1.00)"; context.strokeStyle = "rgba(121,64,43,1.00)"; context.fill(); context.stroke(); //hat var x=255; var y=380; var width = 90; var height= 10; context.beginPath(); context.rect(x, y, width, height); context.lineWidth = 1; context.fillStyle = "rgba(48,25,17,1.00)"; context.strokeStyle = "rgba(48,25,17,1.00)"; context.fill(); context.stroke(); // Quad Curve Hat //starting point coordinates var x = 245; var y = 390; // control point coordinates ( magnet ) var cpointX = canvas.width / 2 - 0; var cpointY = canvas.height / 2 - 0; // ending point coordinates var x1 = 355; var y1 = 390; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(cpointX, cpointY, x1, y1); context.lineWidth = 10; context.strokeStyle = "rgba(121,64,43,1.00)"; context.stroke();