This is the photo that inspired my final picture.
This is my sketch.
This is the beginning outline.
Adding the Head Dress.
Add Color.
Adjust the color.
Add some Gradient for shine.
This is the final product.
Artist Statement: I feel I did really good given the fact that this HTML 5 code is very new to me. I felt like doing a Spartan helmet because I thought it would challenge me to actually see what I know. This definitely was time consuming, but also was fun to see the final outcome!
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(300, 5, 450, 550);
context.lineWidth = 10;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'rgb(240, 0, 40)';
context.stroke();
var controlx10 = 545;
var controly10 = 200;
var controlx11 = 625;
var controly11 = 315;
var X10 = 425;
var Y10 = 270;
var X11 = 600;
var Y11 = 400;
var controlx12 = 560;
var controly12 = 460;
var X12 = 600;
var Y12 = 525;
var controlx41 = 545;
var controly41 = 400;
var controlx31 = 560;
var controly31 = 500;
var endx31 = 510;
var endy31 = 410;
//helmet
context.beginPath();
context.moveTo(X10,Y10);
context.bezierCurveTo(controlx10, controly10, controlx11, controly11, X11, Y11);
context.quadraticCurveTo(controlx12, controly12, X12, Y12);
context.bezierCurveTo(controlx31, controly31, controlx41, controly41, endx31, endy31);
var grd = context.createRadialGradient(630, 270, 50, 630, 270, 105);
grd.addColorStop(1, 'grey');
grd.addColorStop(0, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 533;
var y = 300;
var width = 50;
var height = 50;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'https://secureq.scoutwareforms.net/images/q/ut/q/schoolLogo.gif';
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
var controlX3 = 400;
var controlY3 = 425;
var X1 = 355;
var Y1 = 410;
var X2 = 420;
var Y2 = 280;
var controlx1 = 405;
var controly1 = 330;
var X3 = 525 ;
var Y3 = 324;
var controlx2 = 450;
var controly2 = 310;
var X4 = 510;
var Y4 = 410;
var controlx3 = 545;
var controly3 = 400;
var controlx4 = 560;
var controly4 = 500;
var endx3 = 600;
var endy3 = 525;
var X5 = 625;
var Y5 = 550;
var controlx5 = 530;
var controly5 = 510;
var controlx6 = 530;
var controly6 = 405;
var endx4 = 490;
var endy4 = 450;
var controlx7 = 470;
var controly7 = 490;
var controlx8 =402;
var controly8 = 505;
var endx5 = 390;
var endy5 = 500;
var X6 = 410;
var Y6 = 400;
var X7 = 470 ;
var Y7 = 375;
var X8 = 470;
var Y8 = 360;
var controlx9 = 390;
var controly9 = 375;
var X9 = 399;
var Y9 = 390;
context.beginPath();
context.moveTo(X4, Y4);
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx3, endy3);
context.lineTo(X5, Y5);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, endx4, endy4);
context.bezierCurveTo(controlx7, controly7, controlx8, controly8, endx5, endy5);
context.lineTo(X6, Y6);
context.lineTo(X7, Y7);
context.fillStyle = 'grey'
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var controlx13 = 401;
var controly13 = 375;
var X13 = 400;
var Y13 = 375;
var X20 = 478;
var Y20 = 345;
var X21 = 475;
var Y21 = 380;
var controlx = 370;
var controly = 350;
var x1 = 355;
var y1 = 460;
var x2 = 410;
var y2 = 255;
var x3 = 510;
var y3 = 410;
var controlX = 450;
var controlY = 300;
var endX = 530;
var endY = 325;
var controlX1 = 460;
var controlY1 = 425;
var controlX2 = 450;
var controlY2 = 480;
var endX2 = 400;
var endY2 = 490;
var x4 = 420;
var y4 = 410;
var x5 = 475;
var y5 = 380;
var x6 = 478;
var y6 = 345;
var x7 = 400;
var y7 = 375;
var x8 = 355;
var y8 = 460;
context.beginPath();
context.moveTo(x1,y1);
context.quadraticCurveTo(controlx, controly, x2, y2);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(x3, y3);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX2, endY2);
context.lineTo(x4, y4);
context.lineTo(x5, y5);
context.lineTo(x6, y6);
context.lineTo(x7, y7);
context.quadraticCurveTo(controlX3, controlY3, x8, y8);
context.fillStyle = 'grey'
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(X7, Y7);
context.lineTo(X8, Y8);
context.lineTo(X9, Y9);
context.quadraticCurveTo(controlx13, controly13, X13, Y13);
context.lineTo(X20, Y20);
context.lineTo(X21, Y21);
context.fillStyle = 'grey'
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.moveTo(X1,Y1);
context.quadraticCurveTo(controlx1, controly1, X2, Y2);
context.quadraticCurveTo(controlx2, controly2, X3, Y3);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//head dress
var X22 = 450;
var Y22 = 260;
var X23 = 425;
var Y23 = 200;
var X24 = 450;
var Y24 = 190;
var X25 = 465;
var Y25 = 235;
var X26 = 480;
var Y26 = 235;
var X27 = 480;
var Y27 = 190;
var controlx22 = 490;
var controly22 = 190;
var X32 = 510;
var Y32 = 185;
var X28 = 510;
var Y28 = 235;
var controlx23 = 525;
var controly23 = 230;
var X33 = 540;
var Y33 = 240;
var X29 = 545;
var Y29 = 190;
var controlx24 = 555;
var controly24 = 200;
var X34 = 570;
var Y34 = 200;
var X30 = 555;
var Y30 = 250;
var controlx25 = 570;
var controly25 = 253;
var X35 = 575;
var Y35 = 260;
var controlx26 = 580;
var controly26 = 250;
var X36 = 615;
var Y36 = 250;
var controlx27 = 630;
var controly27 = 275;
var X37 = 625;
var Y37 = 275;
var controlx28 = 575;
var controly28 = 270;
var X38 = 570;
var Y38 = 280;
var controlx29 = 530;
var controly29 = 245;
var X39 = X22;
var Y39 = Y22;
context.beginPath();
context.moveTo(X22, Y22);
context.lineTo(X23, Y23);
context.lineTo(X24, Y24);
context.lineTo(X25, Y25);
context.lineTo(X26, Y26);
context.lineTo(X27, Y27);
context.quadraticCurveTo(controlx22, controly22, X32, Y32);
context.lineTo(X28, Y28);
context.quadraticCurveTo(controlx23, controly23, X33, Y33);
context.lineTo(X29, Y29);
context.quadraticCurveTo(controlx24, controly24, X34, Y34);
context.lineTo(X30, Y30);
context.quadraticCurveTo(controlx25, controly25, X35, Y35);
context.quadraticCurveTo(controlx26, controly26, X36, Y36);
context.quadraticCurveTo(controlx27, controly27, X37, Y37);
context.quadraticCurveTo(controlx28, controly28, X38, Y38);
context.quadraticCurveTo(controlx29, controly29, X39, Y39);
context.fillStyle = 'grey';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var controlx30 = 515;
var controly30 = 140;
var controlx31 = 650;
var controly31 = 205;
var X41 =625 ;
var Y41 = 350;
var controlx33 = 590;
var controly33 = 475;
var X40 = 650;
var Y40 = 575;
var controlx56 = 610;
var controly56 = 530;
var controlx57 = 700;
var controly57 = 380;
var X42 = 700;
var Y42 = 325;
var controlx58 = 675;
var controly58 = 350;
var X43 = 705;
var Y43 = 300;
var controlx59 = 725;
var controly59 = 280;
var X44 = 700;
var Y44 = 250;
var controlx60 = 675;
var controly60 = 250;
var X45 = 700;
var Y45 = 225;
var controlx61 = 715;
var controly61 = 200;
var X46 = 690;
var Y46 = 150;
var controlx62 = 675;
var controly62 = 175;
var X47 = 659;
var Y47 = 120;
var controlx63 = 660;
var controly63 = 100;
var X48 = 650;
var Y48 = 100;
var controlx64 = 635;
var controly64 = 125;
var X49 = 600;
var Y49 = 150;
var X50 = 640;
var Y50 = 100;
context.beginPath();
context.moveTo(375, 225);
context.bezierCurveTo(controlx30, controly30, controlx31, controly31, X41, Y41);
context.quadraticCurveTo(controlx33, controly33, X40, Y40);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var controlx65 = 610;
var controly65 =90 ;
var X51 = 550;
var Y51 = 100;
var controlx66 = 520;
var controly66 = 170;
var X52 = 545;
var Y52 = 100;
var controlx67 = 370;
var controly67 = 190;
var controlx68 = 545;
var controly68 = 100;
var X53 = 550;
var Y53 = 150;
var controlx69 = 500;
var controly69 = 120;
var X54 = 400;
var Y54 = 100;
context.beginPath();
context.moveTo (X40, Y40);
context.bezierCurveTo(controlx56, controly56, controlx57, controly57, X42, Y42);
context.quadraticCurveTo(controlx58, controly58, X43, Y43);
context.quadraticCurveTo(controlx59, controly59, X44, Y44);
context.quadraticCurveTo(controlx60, controly60, X45, Y45);
context.quadraticCurveTo(controlx61, controly61, X46, Y46);
context.quadraticCurveTo(controlx62, controly62, X47, Y47);
context.quadraticCurveTo(controlx63, controly63, X48, Y48);
context.quadraticCurveTo(controlx64, controly64, X49, Y49);
context.lineTo(X50, Y50);
context.quadraticCurveTo(controlx65, controly65, X51, Y51);
context.quadraticCurveTo(controlx68, controly68, X53, Y53);
context.quadraticCurveTo(controlx66, controly66, X52, Y52);
context.quadraticCurveTo(controlx69, controly69, X54, Y54);
context.quadraticCurveTo(controlx67, controly67, 375, 225);
context.bezierCurveTo(controlx30, controly30, controlx31, controly31, X41, Y41);
context.quadraticCurveTo(controlx33, controly33, X40, Y40);
context.fillStyle = 'rgb(240, 0, 40)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var X55 = 628;
var Y55 = 300;
var controlx70 = 545;
var controly70 = 140;
var X56 = 375;
var Y56 = 240;
var controlx71 = 590;
var controly71 = 115;
context.beginPath();
context.moveTo(375, 220);
context.lineTo(X56, Y56);
context.quadraticCurveTo(controlx70, controly70, X55, Y55);
context.quadraticCurveTo(controlx71, controly71, 375, 220);
context.fillStyle = 'grey'
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(300, 5, 450, 550);
context.lineWidth = 10;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'rgb(240, 0, 40)';
context.stroke();
var controlx10 = 545;
var controly10 = 200;
var controlx11 = 625;
var controly11 = 315;
var X10 = 425;
var Y10 = 270;
var X11 = 600;
var Y11 = 400;
var controlx12 = 560;
var controly12 = 460;
var X12 = 600;
var Y12 = 525;
var controlx41 = 545;
var controly41 = 400;
var controlx31 = 560;
var controly31 = 500;
var endx31 = 510;
var endy31 = 410;
//helmet
context.beginPath();
context.moveTo(X10,Y10);
context.bezierCurveTo(controlx10, controly10, controlx11, controly11, X11, Y11);
context.quadraticCurveTo(controlx12, controly12, X12, Y12);
context.bezierCurveTo(controlx31, controly31, controlx41, controly41, endx31, endy31);
var grd = context.createRadialGradient(630, 270, 50, 630, 270, 105);
grd.addColorStop(1, 'grey');
grd.addColorStop(0, 'rgb(255, 255, 255)');
context.fillStyle = grd;
context.fill();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 533;
var y = 300;
var width = 50;
var height = 50;
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'https://secureq.scoutwareforms.net/images/q/ut/q/schoolLogo.gif';
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
var controlX3 = 400;
var controlY3 = 425;
var X1 = 355;
var Y1 = 410;
var X2 = 420;
var Y2 = 280;
var controlx1 = 405;
var controly1 = 330;
var X3 = 525 ;
var Y3 = 324;
var controlx2 = 450;
var controly2 = 310;
var X4 = 510;
var Y4 = 410;
var controlx3 = 545;
var controly3 = 400;
var controlx4 = 560;
var controly4 = 500;
var endx3 = 600;
var endy3 = 525;
var X5 = 625;
var Y5 = 550;
var controlx5 = 530;
var controly5 = 510;
var controlx6 = 530;
var controly6 = 405;
var endx4 = 490;
var endy4 = 450;
var controlx7 = 470;
var controly7 = 490;
var controlx8 =402;
var controly8 = 505;
var endx5 = 390;
var endy5 = 500;
var X6 = 410;
var Y6 = 400;
var X7 = 470 ;
var Y7 = 375;
var X8 = 470;
var Y8 = 360;
var controlx9 = 390;
var controly9 = 375;
var X9 = 399;
var Y9 = 390;
context.beginPath();
context.moveTo(X4, Y4);
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx3, endy3);
context.lineTo(X5, Y5);
context.bezierCurveTo(controlx5, controly5, controlx6, controly6, endx4, endy4);
context.bezierCurveTo(controlx7, controly7, controlx8, controly8, endx5, endy5);
context.lineTo(X6, Y6);
context.lineTo(X7, Y7);
context.fillStyle = 'grey'
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var controlx13 = 401;
var controly13 = 375;
var X13 = 400;
var Y13 = 375;
var X20 = 478;
var Y20 = 345;
var X21 = 475;
var Y21 = 380;
var controlx = 370;
var controly = 350;
var x1 = 355;
var y1 = 460;
var x2 = 410;
var y2 = 255;
var x3 = 510;
var y3 = 410;
var controlX = 450;
var controlY = 300;
var endX = 530;
var endY = 325;
var controlX1 = 460;
var controlY1 = 425;
var controlX2 = 450;
var controlY2 = 480;
var endX2 = 400;
var endY2 = 490;
var x4 = 420;
var y4 = 410;
var x5 = 475;
var y5 = 380;
var x6 = 478;
var y6 = 345;
var x7 = 400;
var y7 = 375;
var x8 = 355;
var y8 = 460;
context.beginPath();
context.moveTo(x1,y1);
context.quadraticCurveTo(controlx, controly, x2, y2);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineTo(x3, y3);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX2, endY2);
context.lineTo(x4, y4);
context.lineTo(x5, y5);
context.lineTo(x6, y6);
context.lineTo(x7, y7);
context.quadraticCurveTo(controlX3, controlY3, x8, y8);
context.fillStyle = 'grey'
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.beginPath();
context.moveTo(X7, Y7);
context.lineTo(X8, Y8);
context.lineTo(X9, Y9);
context.quadraticCurveTo(controlx13, controly13, X13, Y13);
context.lineTo(X20, Y20);
context.lineTo(X21, Y21);
context.fillStyle = 'grey'
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.beginPath();
context.moveTo(X1,Y1);
context.quadraticCurveTo(controlx1, controly1, X2, Y2);
context.quadraticCurveTo(controlx2, controly2, X3, Y3);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
//head dress
var X22 = 450;
var Y22 = 260;
var X23 = 425;
var Y23 = 200;
var X24 = 450;
var Y24 = 190;
var X25 = 465;
var Y25 = 235;
var X26 = 480;
var Y26 = 235;
var X27 = 480;
var Y27 = 190;
var controlx22 = 490;
var controly22 = 190;
var X32 = 510;
var Y32 = 185;
var X28 = 510;
var Y28 = 235;
var controlx23 = 525;
var controly23 = 230;
var X33 = 540;
var Y33 = 240;
var X29 = 545;
var Y29 = 190;
var controlx24 = 555;
var controly24 = 200;
var X34 = 570;
var Y34 = 200;
var X30 = 555;
var Y30 = 250;
var controlx25 = 570;
var controly25 = 253;
var X35 = 575;
var Y35 = 260;
var controlx26 = 580;
var controly26 = 250;
var X36 = 615;
var Y36 = 250;
var controlx27 = 630;
var controly27 = 275;
var X37 = 625;
var Y37 = 275;
var controlx28 = 575;
var controly28 = 270;
var X38 = 570;
var Y38 = 280;
var controlx29 = 530;
var controly29 = 245;
var X39 = X22;
var Y39 = Y22;
context.beginPath();
context.moveTo(X22, Y22);
context.lineTo(X23, Y23);
context.lineTo(X24, Y24);
context.lineTo(X25, Y25);
context.lineTo(X26, Y26);
context.lineTo(X27, Y27);
context.quadraticCurveTo(controlx22, controly22, X32, Y32);
context.lineTo(X28, Y28);
context.quadraticCurveTo(controlx23, controly23, X33, Y33);
context.lineTo(X29, Y29);
context.quadraticCurveTo(controlx24, controly24, X34, Y34);
context.lineTo(X30, Y30);
context.quadraticCurveTo(controlx25, controly25, X35, Y35);
context.quadraticCurveTo(controlx26, controly26, X36, Y36);
context.quadraticCurveTo(controlx27, controly27, X37, Y37);
context.quadraticCurveTo(controlx28, controly28, X38, Y38);
context.quadraticCurveTo(controlx29, controly29, X39, Y39);
context.fillStyle = 'grey';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var controlx30 = 515;
var controly30 = 140;
var controlx31 = 650;
var controly31 = 205;
var X41 =625 ;
var Y41 = 350;
var controlx33 = 590;
var controly33 = 475;
var X40 = 650;
var Y40 = 575;
var controlx56 = 610;
var controly56 = 530;
var controlx57 = 700;
var controly57 = 380;
var X42 = 700;
var Y42 = 325;
var controlx58 = 675;
var controly58 = 350;
var X43 = 705;
var Y43 = 300;
var controlx59 = 725;
var controly59 = 280;
var X44 = 700;
var Y44 = 250;
var controlx60 = 675;
var controly60 = 250;
var X45 = 700;
var Y45 = 225;
var controlx61 = 715;
var controly61 = 200;
var X46 = 690;
var Y46 = 150;
var controlx62 = 675;
var controly62 = 175;
var X47 = 659;
var Y47 = 120;
var controlx63 = 660;
var controly63 = 100;
var X48 = 650;
var Y48 = 100;
var controlx64 = 635;
var controly64 = 125;
var X49 = 600;
var Y49 = 150;
var X50 = 640;
var Y50 = 100;
context.beginPath();
context.moveTo(375, 225);
context.bezierCurveTo(controlx30, controly30, controlx31, controly31, X41, Y41);
context.quadraticCurveTo(controlx33, controly33, X40, Y40);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var controlx65 = 610;
var controly65 =90 ;
var X51 = 550;
var Y51 = 100;
var controlx66 = 520;
var controly66 = 170;
var X52 = 545;
var Y52 = 100;
var controlx67 = 370;
var controly67 = 190;
var controlx68 = 545;
var controly68 = 100;
var X53 = 550;
var Y53 = 150;
var controlx69 = 500;
var controly69 = 120;
var X54 = 400;
var Y54 = 100;
context.beginPath();
context.moveTo (X40, Y40);
context.bezierCurveTo(controlx56, controly56, controlx57, controly57, X42, Y42);
context.quadraticCurveTo(controlx58, controly58, X43, Y43);
context.quadraticCurveTo(controlx59, controly59, X44, Y44);
context.quadraticCurveTo(controlx60, controly60, X45, Y45);
context.quadraticCurveTo(controlx61, controly61, X46, Y46);
context.quadraticCurveTo(controlx62, controly62, X47, Y47);
context.quadraticCurveTo(controlx63, controly63, X48, Y48);
context.quadraticCurveTo(controlx64, controly64, X49, Y49);
context.lineTo(X50, Y50);
context.quadraticCurveTo(controlx65, controly65, X51, Y51);
context.quadraticCurveTo(controlx68, controly68, X53, Y53);
context.quadraticCurveTo(controlx66, controly66, X52, Y52);
context.quadraticCurveTo(controlx69, controly69, X54, Y54);
context.quadraticCurveTo(controlx67, controly67, 375, 225);
context.bezierCurveTo(controlx30, controly30, controlx31, controly31, X41, Y41);
context.quadraticCurveTo(controlx33, controly33, X40, Y40);
context.fillStyle = 'rgb(240, 0, 40)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
var X55 = 628;
var Y55 = 300;
var controlx70 = 545;
var controly70 = 140;
var X56 = 375;
var Y56 = 240;
var controlx71 = 590;
var controly71 = 115;
context.beginPath();
context.moveTo(375, 220);
context.lineTo(X56, Y56);
context.quadraticCurveTo(controlx70, controly70, X55, Y55);
context.quadraticCurveTo(controlx71, controly71, 375, 220);
context.fillStyle = 'grey'
context.fill();
context.strokeStyle = 'black';
context.lineWidth = 1;
context.stroke();
context.closePath();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment