The Canvas Slowly Fills...: Project 1: ASCII

The graphic that I did for this project was based off a painting (see below) that I did over the summer for my new place. For both the painting and this project I reference the movie 300 and based the look of the helmet on the one worn by King Leonidas. In this version I have "SPARTANS" written under the helmet and the number 31 (the year the college was founded) to make the graphic show a little more school spirit. Hope you like it!

Here is a detail shot of the painting that inspired the graphic:

This is the drawing for the project:

Work in progress:

This was by far the most time consuming portion of the entire project. To be honest the was a lot of trial and error in getting the quadratic curves and bezier curves the way that I liked them, but after all was said in done I am happy with the final helmet. The little details to try and give the helmet a little texture was actually the most annoying part of the whole thing...

Adding in the text:

The final result:

Here is the code for the final graphic:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

//Background//

context.beginPath();

context.rect(0, 0, canvas.width, canvas.height);

var grd = context.createLinearGradient(0, 600, 800, 0);

grd.addColorStop(0, 'rgb(150,150,150)');

grd.addColorStop(.5, 'rgb(75,75,75)');

grd.addColorStop(1, 'rgb(190,190,190)');

context.fillStyle = grd;

context.fill();

//Helmet//

//left eye top triangle//

context.beginPath();

context.moveTo(325,250);

context.lineTo(375,250);

context.lineTo(375,275);

context.lineTo(325,250);

context.fillStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();

context.closePath();

//inside helmet path//

context.beginPath();

context.moveTo(375,330);

context.lineTo(330,330);

context.lineTo(330,490);

context.lineTo(425,425);

context.lineTo(425,400);

context.lineTo(700,462);

//straight lines//

context.lineTo(650,400);

context.lineTo(650,225);

context.lineTo(500,200);

context.lineTo(375,225);

context.lineTo(375,330);

context.fillStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();

context.closePath();

//left eye bottom beveled edge//

context.beginPath();

context.moveTo(375,325);

context.lineTo(325,325);

context.lineTo(325,500);

context.lineTo(330,490);

context.lineTo(330,330);

context.lineTo(375,330);

context.lineTo(375,325);

context.fillStyle = 'rgb(255,201,76)';

context.fill();

context.stroke();

context.closePath();

//line in left eye bottom beveled edge//

context.beginPath();

context.moveTo(325,325);

context.lineTo(330,330);

context.stroke();

//Hair in helmet//

context.beginPath();

context.moveTo(403,75);

context.quadraticCurveTo(390,30,350,5);

context.bezierCurveTo(450,5,685,50,692,226);

context.lineTo(403,75);

context.fillStyle = 'rgb(0,0,0)';

context.fill();

context.stroke();

//top portion of helmet//

context.beginPath();

context.moveTo(400,144);

context.lineTo(400,75);

context.bezierCurveTo(500,75,650,75,692,226);

context.lineTo(400,144);

context.fillStyle = 'rgb(255,201,76)';

context.fill();

context.closePath();

context.stroke();

//Helmet outside//

context.beginPath();

context.moveTo(325, 250);

context.bezierCurveTo(400, 50, 650, 50, 700, 250);

context.moveTo(700,250);

context.bezierCurveTo(710, 300, 710, 375, 687, 400);

context.quadraticCurveTo(675,425,700,462);

context.quadraticCurveTo(625,400,550,400);

context.lineTo(550,462);

context.lineTo(450,500);

context.lineTo(450,325);

context.lineTo(500,325);

context.lineTo(500,375);

context.lineTo(510,325);

context.lineTo(540,325);

context.lineTo(575,300);

context.lineTo(600,250);

context.lineTo(510,250);

context.lineTo(500,225);

context.lineTo(500,250);

context.lineTo(400,250);

context.moveTo(400,250);

context.quadraticCurveTo(390,300,400,350);

context.lineTo(375,375);

context.lineTo(369,350);

context.lineTo(375,330);

context.lineTo(375,250);

context.lineTo(325,250);

context.moveTo(375,330);

context.lineTo(375,375);

context.fillStyle = 'rgb(255,201,76)';

context.fill();

context.closePath();

context.stroke();

//helmet details//

context.beginPath();

context.arc(400, 200, 2, 0 , 2 * Math.PI, false);

context.stroke();

context.fillStyle = 'rgb(0,0,0)';

context.fill();

context.closePath();

context.beginPath();

context.arc(350, 225, 1, 0 , 2 * Math.PI, false);

context.stroke();

context.fillStyle = 'rgb(0,0,0)';

context.fill();

context.closePath();

context.beginPath();

context.arc(550, 150, 2, 0 , 2 * Math.PI, false);

context.fillStyle = 'rgb(0,0,0)'

context.fill();

context.closePath();

context.beginPath();

context.arc(575, 200, 3, 0 , 2 * Math.PI, false);

context.fillStyle = 'rgb(0,0,0)'

context.fill();

context.closePath();

context.beginPath();

context.arc(615, 275, 1, 0 , 2 * Math.PI, false);

context.fillStyle = 'rgb(0,0,0)'

context.fill();

context.closePath();

context.beginPath();

context.arc(600, 300, 2, 0 , 2 * Math.PI, false);

context.fillStyle = 'rgb(0,0,0)'

context.fill();

context.closePath();

context.beginPath();

context.arc(675, 275, 2, 0 , 2 * Math.PI, false);

context.fillStyle = 'rgb(0,0,0)'

context.fill();

context.closePath();

context.beginPath();

context.arc(640,175, 2, 0 , 2 * Math.PI, false);

context.fillStyle = 'rgb(0,0,0)'

context.fill();

context.closePath();

context.moveTo(475,425)

context.lineTo(500,450)

context.lineWidth = .2;

context.stroke();

context.moveTo(460,375);

context.lineTo(525,440);

context.stroke();

context.moveTo(515,400);

context.lineTo(525,410);

context.stroke();

//helmet highlights//

context.beginPath();

context.arc(450,175, 50, 0 , 2 * Math.PI, false);

var grd=context.createRadialGradient(450, 175, 45, 450, 175, 5);

grd.addColorStop(0, 'rgb(255,201,80)');

grd.addColorStop(1, 'rgb(250,250,200)');

context.fillStyle = grd;

context.fill();

context.beginPath();

context.moveTo(415,90);

context.lineTo(415,120);

context.quadraticCurveTo(450,90,510,90);

context.quadraticCurveTo(450,80,415,90);

var grd = context.createLinearGradient(415, 100, 510, 100);

grd.addColorStop(0, 'rgb(250,250,200)');

grd.addColorStop(.8, 'rgb(279,201,80)');

context.fillStyle = grd

context.fill();

context.closePath();

context.font = 'bold 300px Georgia';

context.strokeStyle = 'rgb(90,90,90)';

context.lineWidth = 3;

context.strokeText('3', 25,475);

context.font = 'bold 300px Georgia';

context.strokeStyle = 'rgb(90,90,90)';

context.lineWidth = 3;

context.strokeText('1', 125,475);

context.font = 'Bold 100px Georgia';