2/13: Canvas Project
Final Work:
To create my Harry Potter Project I used Dreamweaver and my knowledge of coding to complete my rendition of the famous wizard. I chose Harry Potter as my subject because as a kid my dad and I would watch the movies together. I decided on replicating a cartoon version of him because my dad bought me a little bobble head for my desk before I went away to college.
I really enjoyed this project because it tested my skills as a student and gave me a better understanding of the software. I think that the hair gave me the most trouble but once I finally realized how to correctly place the coordinates for the quadratic curves, it became pretty easy. I started off with the more basic shapes and had to strategically layer each one. I would run into problems when copying and pasting codes because sometimes they would disappear or overlap one another. So, this project really helped me understand how to properly code shapes together to make a cohesive image.
This project took me about 8 hours to complete over the course of 4 days. I found it really helpful to do as much as I could and when I would get frustrated our needed a break, I could do that because I did not wait until the last minute to do the project. Having enough time to take breaks or make mistakes was essential for me. I'm really happy with how it turned out, I think its a cute graphic while still being realistic and depicting Harry Potter. I think the scarf and the scar above his eye brow was helpful in portraying that. I also really enjoyed being able to use my creative conscience to make decision based on what I though looked best. For instance, I think I changed the placement, size, and shape of his head, eyes, and hair about 10 times. Overall, this project was time consuming and pretty difficult but very rewarding because of the way it came out.
Inspiration and Sketch:
My Code:
// background
var x = 0;
var y = 0;
var width = canvas.width;
var height = canvas.height;
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.fillStyle = 'rgba(208,192,162,1.00)';
ctx.fill();
// line 1 red stripe
ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(50,600);
ctx.lineWidth = 50;
ctx.strokeStyle = 'rgba(123,9,11,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();
// line 2 red stripe
ctx.beginPath();
ctx.moveTo(200,0);
ctx.lineTo(200,600);
ctx.lineWidth = 50;
ctx.strokeStyle = 'rgba(123,9,11,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();
// line 3 red stripe
ctx.beginPath();
ctx.moveTo(350,0);
ctx.lineTo(350,600);
ctx.lineWidth = 50;
ctx.strokeStyle = 'rgba(123,9,11,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();
// line 4 red stripe
ctx.beginPath();
ctx.moveTo(500,0);
ctx.lineTo(500,600);
ctx.lineWidth = 50;
ctx.strokeStyle = 'rgba(123,9,11,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();
// line 5 red stripe
ctx.beginPath();
ctx.moveTo(635,0);
ctx.lineTo(635,600);
ctx.lineWidth = 50;
ctx.strokeStyle = 'rgba(123,9,11,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();//black robe
var tx1 = 350;
var ty1 = 80;
var tx2 = 510;
var ty2 = 580;
var tx3 = 190;
var ty3 = 580;
var startx = 575;
var starty = 400;
var endx = 650;
var endy = 500;
ctx.beginPath();
ctx.moveTo(tx1, ty1);
ctx.lineTo(tx2, ty2);
ctx.lineTo(tx3, ty3);
ctx.lineTo(tx1, ty1);
ctx.closePath();
ctx.strokeStyle = 'rgba(7,7,7,1.00)';
ctx.lineWidth = 15;
//ctx.fillStyle = 'rgb(230, 230. 230)';
var grd = ctx.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, 'rgba(0,0,0,1.00)');
grd.addColorStop(1, 'rgba(0,0,0,1.00)');
ctx.fillStyle = grd;
ctx.fill();
ctx.stroke();
// scarf tail
ctx.beginPath();
ctx.moveTo(300,250);
ctx.lineTo(300,500);
ctx.lineWidth = 90;
ctx.strokeStyle = '#D80B38';
ctx.lineCap = 'butt';
ctx.stroke();
// scarf tail stripes
ctx.beginPath();
ctx.moveTo(300,350);
ctx.lineTo(300, 390);
ctx.lineWidth = 90;
ctx.strokeStyle = '#F7EB7C';
ctx.lineCap = 'butt';
ctx.stroke();
// scarf tail stripes
ctx.beginPath();
ctx.moveTo(300,430);
ctx.lineTo(300, 470);
ctx.lineWidth = 90;
ctx.strokeStyle = '#F7EB7C';
ctx.lineCap = 'butt';
ctx.stroke();
// scarf stripes
ctx.beginPath();
ctx.moveTo(270,300);
ctx.lineTo(430,300);
ctx.lineWidth = 110;
ctx.strokeStyle = '#D80B38';
ctx.lineCap = 'round';
ctx.stroke();
// scarf stripes
ctx.beginPath();
ctx.moveTo(250,300);
ctx.lineTo(290,300);
ctx.lineWidth = 110;
ctx.strokeStyle = '#F7EB7C';
ctx.lineCap = 'butt';
ctx.stroke();
// scarf stripes
ctx.beginPath();
ctx.moveTo(330,300);
ctx.lineTo(370,300);
ctx.lineWidth = 110;
ctx.strokeStyle = '#F7EB7C';
ctx.lineCap = 'butt';
ctx.stroke();
// scarf stripes
ctx.beginPath();
ctx.moveTo(410,300);
ctx.lineTo(450,300);
ctx.lineWidth = 110;
ctx.strokeStyle = '#F7EB7C';
ctx.lineCap = 'butt';
ctx.stroke();
// ears
var centerX = 230;
var centerY = 200;
var radius = 15;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#F0CCBF';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = 'black';
ctx.stroke();
// ears
var centerX = 470;
var centerY = 200;
var radius = 15;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#F0CCBF';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = 'black';
ctx.stroke();
// Harry face
var centerX = 350;
var centerY = 200;
var radius = 120;
// draw the yellow circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#F0CCBF';
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = 'black';
ctx.stroke();
//hair
var centerX = 350;
var centerY = 175;
var radius = 143;
var startangle = 1.9 * Math.PI;
var endangle = 1.1 * Math.PI;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startangle, endangle, true);
ctx.lineWidth = 8;
ctx.strokeStyle = "#634822";
ctx.stroke();
ctx.fillStyle = "#634822";
ctx.fill();
// scar
ctx.beginPath();
ctx.moveTo(275,135);
ctx.lineTo(290, 150);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(208,166,81,1.00)';
ctx.lineCap = 'round';
ctx.stroke();
// scar
ctx.beginPath();
ctx.moveTo(290,150);
ctx.lineTo(275, 155);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(208,166,81,1.00)';
ctx.lineCap = 'round';
ctx.stroke();
// scar
ctx.beginPath();
ctx.moveTo(275,155);
ctx.lineTo(290, 170);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(208,166,81,1.00)';
ctx.lineCap = 'round';
ctx.stroke();
// glasses
var centerX = 290;
var centerY = 210;
var radius = 40;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#F0CCBF';
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = 'black';
ctx.stroke();
// glasses
var centerX = 410;
var centerY = 210;
var radius = 40;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#F0CCBF';
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = 'black';
ctx.stroke();
// glasses
ctx.beginPath();
ctx.moveTo(254,200);
ctx.lineTo(230,200);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(0,0,0,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();
// glasses
ctx.beginPath();
ctx.moveTo(326,200);
ctx.lineTo(374,200);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(0,0,0,1.00)';
ctx.lineCap = 'butt';
ctx.stroke();
// glasses
ctx.beginPath();
ctx.moveTo(446,200);
ctx.lineTo(474,200);
ctx.lineWidth = 8;
ctx.strokeStyle = '#000000';
ctx.lineCap = 'butt';
ctx.stroke();
// right eyebrow
var centerX = 410;
var centerY = 198
var radius = 20;
var startangle = 1.* Math.PI;;
var endangle = 0.01* Math.PI;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startangle, endangle, false);
ctx.fillStyle = "#F0CCBF";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "#634822";
ctx.stroke();
// right eyebrow
var centerX = 290;
var centerY = 198
var radius = 20;
var startangle = 1.* Math.PI;;
var endangle = .0001* Math.PI;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, startangle, endangle, false);
ctx.fillStyle = "#F0CCBF";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "#634822";
ctx.stroke();
// eyes
var centerX = 290;
var centerY = 200;
var radius = 12;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#070707';
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = 'black';
ctx.stroke();
// eyes
var centerX = 410;
var centerY = 200;
var radius = 12;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#070707';
ctx.fill();
ctx.lineWidth = 8;
ctx.strokeStyle = 'black';
ctx.stroke();
// mouth
ctx.beginPath();
ctx.moveTo(320,280);
ctx.lineTo(350,295);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(0,0,0,1.00)';
ctx.lineCap = 'round';
ctx.stroke();
// mouth
ctx.beginPath();
ctx.moveTo(350,295);
ctx.lineTo(380,280);
ctx.lineWidth = 8;
ctx.strokeStyle = 'rgba(0,0,0,1.00)';
ctx.lineCap = 'round';
ctx.stroke();
ctx.stroke();//emblem
var tx1 = 425;
var ty1 = 400;
var tx2 = 415;
var ty2 = 400;
var tx3 = 420;
var ty3 = 406;
var startx = 575;
var starty = 400;
var endx = 650;
var endy = 500;
ctx.beginPath();
ctx.moveTo(tx1, ty1);
ctx.lineTo(tx2, ty2);
ctx.lineTo(tx3, ty3);
ctx.lineTo(tx1, ty1);
ctx.closePath();
ctx.strokeStyle = '#F7EB7C';
ctx.lineWidth = 15;
//ctx.fillStyle = 'rgb(230, 230. 230)';
var grd = ctx.createLinearGradient(startx, starty, endx, endy);
grd.addColorStop(0, '#F7EB7C');
grd.addColorStop(1, '#F7EB7C');
ctx.fillStyle = grd;
ctx.fill();
ctx.stroke();
// emblem
ctx.beginPath();
ctx.moveTo(440,380);
ctx.lineTo(400,380);
ctx.lineWidth = 30;
ctx.strokeStyle = '#F7EB7C';
ctx.lineCap = 'butt';
ctx.stroke();
//bangs
var x = 295;
var y = 125;
var controlX = 185;
var controlY = 210;
var x1 = 240;
var y1 = 135;
var controlX1 = 150;
var controlY1 = 230;
var x2 = 213;
var y2 = 125;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.quadraticCurveTo(controlX, controlY, x1, y1);
ctx.quadraticCurveTo(controlX1, controlY1, x2, y2);
ctx.fillStyle = '#634822';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "#634822";
ctx.stroke();
//bangs
var x = 400;
var y = 125;
var controlX = 395;
var controlY = 210;
var x1 = 350;
var y1 = 135;
var controlX1 = 320;
var controlY1 = 230;
var x2 = 290;
var y2 = 125;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.quadraticCurveTo(controlX, controlY, x1, y1);
ctx.quadraticCurveTo(controlX1, controlY1, x2, y2);
ctx.fillStyle = '#634822';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "#634822";
ctx.stroke();
//bangs
var x = 487;
var y = 125;
var controlX = 530;
var controlY = 210;
var x1 = 450;
var y1 = 135;
var controlX1 = 440;
var controlY1 = 230;
var x2 = 400;
var y2 = 125;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.quadraticCurveTo(controlX, controlY, x1, y1);
ctx.quadraticCurveTo(controlX1, controlY1, x2, y2);
ctx.fillStyle = '#634822';
ctx.fill();
ctx.lineWidth = 1;
ctx.strokeStyle = "#634822";
ctx.stroke();
Comments
Post a Comment