Canvas Final Project : Stitch
After a long 17 hours of working on code I finally finished my final canvas. This is my first time using DreamWeaver and overall I think Ive developed a love-hate relationship with it. I love how the designs come out and how everything is very customizable but I also hate how tedious and slow the work is to get to a final product. I developed this final canvas with multiple different and difficult shapes but overall, I think the final canvas turned out pretty well.
I have always loved Stitch as a little girl and I gained some inspiration from looking at prior projects. Disney characters (especially Stitch) has always and forever will be my favorite. I include lots of Disney themes and colors into my artwork and so I decided to try it out as my first project on DreamWeaver.
Everything in this canvas are custom shapes using quadratic curves and bezier curves. Although it made the process more difficult, I think it was the best way to approach the shapes and curves in the Stitch character.
Reference Pic:
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//background
var bkgdgrd = context.createLinearGradient(0,0,0,800);
bkgdgrd.addColorStop(0,"rgba(0, 204, 255,1)");
bkgdgrd.addColorStop(.40, "rgba(153, 255, 255, 1)");
bkgdgrd.addColorStop(.50,"rgba(255, 229, 204, 1)");
bkgdgrd.addColorStop(1,"rgba(255, 204, 153,1)");
// BACKGROUND
context.beginPath();
context.rect(100,0,675,600);
context.closePath();
context.fillStyle = bkgdgrd;
context.fill();
// head
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(250, 350);
context.bezierCurveTo(275, 150, 575, 150, 600, 350);
context.bezierCurveTo(500, 425, 350, 425, 250, 350);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//left ear inside
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (175,350);
context.lineTo (175,325);
context.lineTo (150,325);
context.bezierCurveTo (125,250,125,175,175,50);
context.bezierCurveTo (200,100,225,175,200,225);
context.lineTo (250,350);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(219,139,214)';
context.stroke();
context. fill ();
context. closePath
///left ear (bottom ear fold)
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (250,350);
context.bezierCurveTo (225,325,200,325,175,350);
context.bezierCurveTo (200,375,225,375,250,350);
context.lineWidth = 5;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//left ear (top ear fold)
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (250,350);
context.bezierCurveTo (250,300,225,250,200,225);
context.bezierCurveTo (200,275,225,325,250,350);
context.lineWidth = 5;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//right ear inside
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (675,350);
context.lineTo (675,325);
context.lineTo (700,325);
context.bezierCurveTo (750,250,750,175,675,50);
context.bezierCurveTo (650,100,625,175,650,225);
context.lineTo (600,350);
context.lineWidth = 2;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(219,139,214)';
context.fill();
context.stroke();
///right ear (bottom ear fold)
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (600,350);
context.bezierCurveTo (625,325,650,325,675,350);
context.bezierCurveTo (650,375,625,375,600,350);
context.lineWidth = 5;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//right ear (top ear fold)
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (600,350);
context.bezierCurveTo (600,300,625,250,650,225);
context.bezierCurveTo (650,275,625,325,600,350);
context.lineWidth = 5;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//nose shape
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 1.8;
var radius = 35;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 4;
context.strokeStyle =
context.stroke();
// left nostril
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 1.8;
var radius = 35;
var startangle = 1.5;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,102)";
context.stroke();
// right nostril
var centerX = canvas.width / 1.9;
var centerY = canvas.height / 1.8;
var radius = 35;
var startangle = 1.5;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
//context.fillStyle = "red";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,102)";
context.stroke();
//behind left eye- light blue
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (375,350);
context.lineTo (350,225);
context.bezierCurveTo (300,250,250,275,260,350);
context.bezierCurveTo (300,375,350,375,375,350);
context.lineWidth = 5;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(76,209,229)';
context.stroke();
context. fill ();
context. closePath
//right behind eye
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo (475,350);
context.lineTo (500,225);
context.bezierCurveTo (550,240,590,275,590,350);
context.bezierCurveTo (550,375,500,375,475,350);
context.lineWidth = 5;
// line color
context.strokeStyle ='rgb(0,0,0)';
context.fillStyle = 'rgb(76,209,229)';
context.stroke();
context. fill ();
context. closePath
////left eye
var centerX = canvas.width / 2.3;
var centerY = canvas.height / 2;
var radius = 50;
var startangle = 1;
var endangle = 1.5 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//right eye
var centerX = canvas.width / 1.61;
var centerY = canvas.height / 2;
var radius = 50;
var startangle = 2;
var endangle = 1.5 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
//context.fillStyle = "red";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//left white eye
var centerX = canvas.width / 2.4;
var centerY = canvas.height / 2.2;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();
//right white eye
var centerX = canvas.width / 1.56;
var centerY = canvas.height / 2.2;
var radius = 15;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
//context.fillStyle = "red";
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "rgb(255,255,255)";
context.stroke();
//mouth
// starting point coordinates
var x = 300;
var y = 375;
// control point coordinates ( magnet )
var cpointX = canvas.width / 2.5 + 100;
var cpointY = canvas.height / 2 + 100;
// ending point coordinates
var x1 = 550;
var y1 = 375;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(cpointX, cpointY, x1, y1);
context.lineWidth = 4;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//right leg
var rectx3 = 450;
var recty3 = 550;
var rectwidth3 = 170;
var rectheight3 = 50;
var x5= 600;
var y5= 150;
var x6= 550;
var y6= 500;
//blue square rectangle3
context.beginPath();
context.rect(rectx3,recty3,rectwidth3,rectheight3);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.fill();
context.stroke();
//left leg
var rectx3 = 235;
var recty3 = 550;
var rectwidth3 = 160;
var rectheight3 = 50;
var x5= 600;
var y5= 150;
var x6= 550;
var y6= 500;
//blue square rectangle3
context.beginPath();
context.rect(rectx3,recty3,rectwidth3,rectheight3);
context.lineWidth = 2;
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.fill();
context.stroke();
// stomach
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(350, 400);
context.bezierCurveTo(300, 450, 275, 500, 275, 550);
context.lineTo (375,590)
context.bezierCurveTo(400, 600, 450, 600, 475, 590);
context.lineTo (575,550)
context.bezierCurveTo(575, 500, 550, 450, 500, 400);
context.bezierCurveTo(450, 414, 400, 414, 350, 400);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//inner stomach fur
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(350, 400);
context.bezierCurveTo(320, 500, 350, 550, 425, 575);
context.bezierCurveTo(450,570,530,540,500,400);
context.bezierCurveTo(450, 414, 400, 414, 350, 400);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(76,209,229)';
context.stroke();
context. fill ();
context. closePath
//right foot circle
var centerX = canvas.width / 1.26;
var centerY = canvas.height / 1.09;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = 'rgb(0,102,204)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//left foot circle
var centerX = canvas.width / 3.68;
var centerY = canvas.height / 1.09;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = 'rgb(0,102,204)';
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//left foot inner circle
var centerX = canvas.width / 3.68;
var centerY = canvas.height / 1.09;
var radius = 30;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//right foot circle
var centerX = canvas.width / 1.26;
var centerY = canvas.height / 1.09;
var radius = 30;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//right foot fingernail 1
var centerX = canvas.width / 1.26;
var centerY = canvas.height / 1.2;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//right foot fingernail 2
var centerX = canvas.width / 1.17;
var centerY = canvas.height / 1.12;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//right foot fingernail 3
var centerX = canvas.width / 1.19;
var centerY = canvas.height / 1.03;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
// left foot nail 1
var centerX = canvas.width / 3.6;
var centerY = canvas.height / 1.2;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//left foot fingernail 2
var centerX = canvas.width / 4.7;
var centerY = canvas.height / 1.12;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//left foot fingernail 3
var centerX = canvas.width / 4.5;
var centerY = canvas.height / 1.03;
var radius = 10;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "rgb(0,0,102)";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
///left arm
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(350, 400);
context.bezierCurveTo(325, 550, 300, 590, 350, 600);
context.bezierCurveTo(400, 590, 375, 550, 350, 400);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
///right arm
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(500, 400);
context.bezierCurveTo(475, 550, 425, 590, 500, 600);
context.bezierCurveTo(550, 590, 515, 550, 500, 400);
context.lineWidth = 5;
// line color
context.strokeStyle = 'rgb(0,0,0)';
context.fillStyle = 'rgb(0,102,204)';
context.stroke();
context. fill ();
context. closePath
//hand nail 1
var centerX = canvas.width / 4.5;
var centerY = canvas.height / 1.03;
var radius = 8;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script
16></head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Comments
Post a Comment