Canvas Project
For my project, I decided to create the image of a robot. I found an image on Pinterest that I thought looked very clean and interesting, and decided to recreate it in my own style. I especially liked the static lines connecting the two bulbs on the top of the robot's head, so I wanted that to be included in the final design. At first, I ran into many problems with my code, because my computer isn’t compatible with Dreamweaver and I had to use Visual Studio code, which doesn’t automatically display the design. However, after I started to create the initial features of the design, I got the hang of it and this project was really fun to create.
To incorporate the Bezier Curve, I added a heart on the robot to liven up the design. The most time-consuming part was creating the arms using the quadratic code because I had to sketch and plan the coordinates. In total, I spent about six hours on this project. Although it appears simple, I wanted to take my time on the details like the static lines above the robot’s head, the screws, and the heart. I believe my design is an accurate representation of the initial inspiration, but I’m pleased with how I incorporated my personal style with the color scheme, small details, and the background.
Inspiration:
Sketch:
Code:
// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE
//BACKGROUND
var x1 = 100;
var y1 = 200;
var x2 = 500;
var y2 = 500;
var startx = 0;
var starty = 0;
var width = 800;
var height = 600;
context.beginPath();
context.rect(startx, starty, canvas.width, canvas.height);
var grd = context.createLinearGradient(0, 600, 800, 0);
grd.addColorStop(0, 'rgb(240,126,237)');
grd. addColorStop(.5, 'rgb(239,206, 246)');
grd.addColorStop(1, 'rgb(240,126,237)');
context.fillStyle = grd;
context.fill();
context.strokeStyle = 'rgb(239,206, 246)' ;
context.lineWidth = 1;
//GROUND
var x=0;
var y=470;
var width = 800
var height= 130;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(215,187,111)';
context.strokeStyle = 'rgb(215,187,111)';
context.fill();
context.stroke();
//context.fillStyle = 'rgb(255,0,0)';
context.fill();
context.lineWidth = 1;
context.stroke();
//HEAD
var x=300;
var y=100;
var width = 200
var height= 100;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(153,153,255)';
context.strokeStyle = 'rgb(153,153,255)';
context.fill();
context.stroke();
//NOSE
context.beginPath(); // begin a shape
context.moveTo(400,145); // point A coordinates
context.lineTo(390, 160); // point B coords
context.lineTo(410,160); // point C coords
context.closePath(); // close the shape
context.lineWidth = 1; // you can use a variable that changes wherever you see a number
context.lineJoin = "straight";
context.strokeStyle = "black"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "black";
//LEFT EYE
context.beginPath();
context.arc(345, 150, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'black' ;
context.fill();
context.lineWidth =3;
context.strokeStyle = 'white';
context.stroke();
//RIGHT EYE
context.beginPath();
context.arc(455, 150, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'black' ;
context.fill();
context.lineWidth =3;
context.strokeStyle = 'white';
context.stroke();
//NECK
var x=370;
var y=200;
var width = 60
var height= 25;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(255, 255, 102)';
context.strokeStyle = 'rgb(255, 255, 102)';
context.fill();
context.stroke();
//BODY
var x=300;
var y=225;
var width = 200
var height= 200;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(153,153,255)';
context.strokeStyle = 'rgb(153,153,255)';
context.fill();
context.stroke();
//LEFT LEG
var x=325;
var y=425;
var width = 50
var height= 150;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(255, 255, 102)';
context.strokeStyle = 'rgb(255, 255, 102)';
context.fill();
context.stroke();
//LEFT FOOT
//t1
context.beginPath(); // begin a shape
context.moveTo(325,545); // point A coordinates
context.lineTo(300, 575); // point B coords
context.lineTo(325,575); // point C coords
context.closePath(); // close the shape
context.lineWidth = 1; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(255, 255, 102)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(255, 255, 102)";
context.fill();
//t2
context.beginPath(); // begin a shape
context.moveTo(375,545); // point A coordinates
context.lineTo(400, 575); // point B coords
context.lineTo(375,575); // point C coords
context.closePath(); // close the shape
context.lineWidth = 1; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(255, 255, 102)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(255, 255, 102)";
context.fill();
//RIGHT LEG
var x=425;
var y=425;
var width = 50
var height= 150;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(255, 255, 102)';
context.strokeStyle = 'rgb(255, 255, 102)';
context.fill();
context.stroke();
//RIGHT FOOT
//t1
context.beginPath(); // begin a shape
context.moveTo(425,545); // point A coordinates
context.lineTo(400, 575); // point B coords
context.lineTo(425,575); // point C coords
context.closePath(); // close the shape
context.lineWidth = 1; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(255, 255, 102)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(255, 255, 102)";
context.fill();
//t2
context.beginPath(); // begin a shape
context.moveTo(475,545); // point A coordinates
context.lineTo(500, 575); // point B coords
context.lineTo(475,575); // point C coords
context.closePath(); // close the shape
context.lineWidth = 1; // you can use a variable that changes wherever you see a number
context.lineJoin = "round";
context.strokeStyle = "rgba(255, 255, 102)"; // Reb Green Blue Alpha
context.stroke();
context.fillStyle = "rgba(255, 255, 102)";
context.fill();
//RIGHT KNEE
var centerX = 350;
var centerY = 500
var radius = 20;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
//LEFT KNEE
var centerX = 450;
var centerY = 500
var radius = 20;
var startangle = 0* Math.PI;;
var endangle = 1* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "white";
context.stroke();
//ANKLES
context.moveTo(315,560); // COORDINATES OF STARTING POINT
context.lineTo(385,560); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.moveTo(415,560); // COORDINATES OF STARTING POINT
context.lineTo(485,560); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.moveTo(325,530); // COORDINATES OF STARTING POINT
context.lineTo(375,530); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
context.moveTo(425,530); // COORDINATES OF STARTING POINT
context.lineTo(475,530); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.stroke(); // STROKE
//BODY LINE
context.moveTo(345,225); // COORDINATES OF STARTING POINT
context.lineTo(345,425); // COORDS OF ENDING POINT 1
context.lineWidth = 5; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
//BODY SCREWS
context.beginPath();
context.arc(365, 250, 1, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(150,150,255)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'white)';
context.stroke();
context.beginPath();
context.arc(365, 275, 1, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(150,150,255)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'white)';
context.stroke();
context.beginPath();
context.arc(365, 300, 1, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(150,150,255)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'white)';
context.stroke();
context.beginPath();
context.arc(365, 325, 1, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(150,150,255)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'white)';
context.stroke();
context.beginPath();
context.arc(365, 350, 1, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(150,150,255)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'white)';
context.stroke();
context.beginPath();
context.arc(365, 375, 1, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(150,150,255)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'white)';
context.stroke();
//LEFT ANTENNA
context.moveTo(325,100); // COORDINATES OF STARTING POINT
context.lineTo(325,65); // COORDS OF ENDING POINT 1
context.lineWidth = 10; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
//RIGHT ANTENNA
context.moveTo(475,100); // COORDINATES OF STARTING POINT
context.lineTo(475,65); // COORDS OF ENDING POINT 1
context.lineWidth = 10; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
//LEFT ANTENNA BALL
context.beginPath();
context.arc(325, 68, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255, 255, 102)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(255, 255, 102)';
context.stroke();
//RIGHT ANTENNA BALL
//LEFT ANTENNA BALL
context.beginPath();
context.arc(475, 68, 10, 0 , 2* Math.PI, true);
context.fillStyle = 'rgba(255, 255, 102)' ;
context.fill();
context.lineWidth =10;
context.strokeStyle = 'rgba(255, 255, 102))';
context.stroke();
//HEART BOX
var x=415;
var y=270;
var width = 70
var height= 50;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(128,128,128)';
context.strokeStyle = 'white';
context.fill();
context.stroke()
//HEART
var Ax = 450;
var Ay = 290;
var Bx = 450;
var By = 315;
var control1x = 430;
var control1y = 270;
var control2x = 415;
var control2y = 295;
var control3x = 485;
var control3y = 295;
var control4x = 470;
var control4y = 270;
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 3;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);
context.lineWidth = 3;
// line color
context.strokeStyle = 'rgb(255, 100, 100)';
context.lineCap = 'round';
context.stroke();
context.fillStyle = 'rgb(255, 0, 0)';
context.fill()
//STATIC LINES
context.moveTo(340,67); // COORDINATES OF STARTING POINT
context.lineTo(363,67); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(363,67); // COORDINATES OF STARTING POINT
context.lineTo(372,78); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(372,78); // COORDINATES OF STARTING POINT
context.lineTo(385,50); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(385,50); // COORDINATES OF STARTING POINT
context.lineTo(390,80); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(390,80); // COORDINATES OF STARTING POINT
context.lineTo(396,63); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(396,63); // COORDINATES OF STARTING POINT
context.lineTo(400,77); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(400,77); // COORDINATES OF STARTING POINT
context.lineTo(410,68); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(410,68); // COORDINATES OF STARTING POINT
context.lineTo(415,75); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(415,75); // COORDINATES OF STARTING POINT
context.lineTo(425,55); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(425,55); // COORDINATES OF STARTING POINT
context.lineTo(432,67); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(432,67); // COORDINATES OF STARTING POINT
context.lineTo(460,67); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
//BUTTONS
var x=430;
var y=350;
var width = 50
var height= 60;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'rgb(255, 255, 102)';
context.strokeStyle = 'rgb(255, 255, 102)';
context.fill();
context.stroke();
context.moveTo(455,350); // COORDINATES OF STARTING POINT
context.lineTo(455,410); // COORDS OF ENDING POINT 1
context.lineWidth = 3; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
context.moveTo(430,365); // COORDINATES OF STARTING POINT
context.lineTo(480,365); // COORDS OF ENDING POINT 1
context.lineWidth = 3; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
context.moveTo(430,380); // COORDINATES OF STARTING POINT
context.lineTo(480,380); // COORDS OF ENDING POINT 1
context.lineWidth = 3; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
context.moveTo(430,395); // COORDINATES OF STARTING POINT
context.lineTo(480,395); // COORDS OF ENDING POINT 1
context.lineWidth = 3; // STROKE WIDTH
context.strokeStyle = "white";
context.stroke();
//MOUTH
var centerX = 360;
var centerY = 177
var radius = 10;
var startangle = 0.5* Math.PI;;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
context.fillStyle = "white";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
var x=360;
var y=167;
var width = 85
var height= 20;
context.beginPath();
context.rect(x, y, width, height);
context.lineWidth = 1;
context.fillStyle = 'white';
context.strokeStyle = 'black';
context.fill();
context.stroke();
var centerX = 445;
var centerY = 177
var radius = 10;
var startangle = 0.5* Math.PI;;
var endangle = 1.5* Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
context.fillStyle = "white";
context.fill();
context.lineWidth = 1;
context.strokeStyle = "black";
context.stroke();
context.moveTo(392,167); // COORDINATES OF STARTING POINT
context.lineTo(392,187); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(375,167); // COORDINATES OF STARTING POINT
context.lineTo(375,187); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(410,167); // COORDINATES OF STARTING POINT
context.lineTo(410,187); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(429,167); // COORDINATES OF STARTING POINT
context.lineTo(429,187); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
//RIGHT ARM
var x = 510;
var y = 250;
var controlX = 560;
var controlY = 245;
var x1 = 560;
var y1 = 370;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.lineCap = 'square';
context.lineWidth = 26;
context.strokeStyle = "rgb(255, 255, 102)";
context.stroke();
//LEFT ARM
var x = 290;
var y = 250;
var controlX = 240;
var controlY = 245;
var x1 = 240;
var y1 = 370;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.lineCap = 'square';
context.lineWidth = 26;
context.strokeStyle = "rgb(255, 255, 102)";
context.stroke();
//RIGHT HAND
var x = 540;
var y = 400;
var controlX = 560;
var controlY = 350;
var x1 = 590;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.lineCap = 'butt';
context.lineWidth = 18;
context.strokeStyle = "rgb(255, 255, 255)";
context.stroke();
//LEFT HAND
var x = 215;
var y = 400;
var controlX = 235;
var controlY = 350;
var x1 = 265;
var y1 = 400;
context.beginPath();
context.moveTo(x, y);
context.quadraticCurveTo(controlX, controlY, x1, y1);
context.lineCap = 'butt';
context.lineWidth = 18;
context.strokeStyle = "rgb(255, 255, 255)";
context.stroke();
//RIGHT ELBOW
context.beginPath();
context.arc(555, 300, 15, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(128,128,128)';
context.fill();
context.lineWidth =3;
context.strokeStyle = 'black';
context.stroke();
//LEFT ELBOW
context.beginPath();
context.arc(247, 300, 15, 0 , 2* Math.PI, true);
context.fillStyle = 'rgb(128,128,128)';
context.fill();
context.lineWidth =3;
context.strokeStyle = 'black';
context.stroke();
//RIGHT ELBOW LINE
context.moveTo(540,306); // COORDINATES OF STARTING POINT
context.lineTo(568,290); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(544,310); // COORDINATES OF STARTING POINT
context.lineTo(570,295); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
//LEFT ELBOW LINE
context.moveTo(233,295); // COORDINATES OF STARTING POINT
context.lineTo(262,302); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
context.moveTo(232,300); // COORDINATES OF STARTING POINT
context.lineTo(261,307); // COORDS OF ENDING POINT 1
context.lineWidth = 1; // STROKE WIDTH
context.strokeStyle = "black";
context.stroke();
// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE
Comments
Post a Comment