Digital Media, Blog #3 - Canvas Project

For when brainstorming this project, I wanted to create something I like a lot that way I could get myself really into the project. I knew I didn't want to create human faces with canvas, but I thought about simpler designs such as cartoons. I decided to focus this project on the Star Wars antagonist character, Darth Vader, as I really like the unique design with both series of quadrilaterals as well as curved edges. At first, I wanted to create a more accurate real-life representation of the character's costume, but I decided to take liberties and create a cartoonish design, similar to an Art Deco. After creating the look for the face with the simplistic shapes, I knew this was the route I wanted to go.

Below is my original drawing along with all of the photos I used for reference and style inspiration.

Below are stills from the animated television series Star Wars Rebels, which uses the art style of Ralph McQuarrie, who created the original concept art for 1977's Star Wars.

<!doctype html>

<html>

<head>

body,td,th {

font-family: Monaco, "Courier New", "monospace";

font-size: 14px;

color: rgba(255,255,255,1);

}

body {

background-color: rgba(0,0,0,1);

}

#container {

position: relative;

text-align: left;

width: 95%;

height: 800px;

}

#fmxCanvas {

position: relative;

background-color:rgba(255,255,255,1);

border: rgba(255,255,255,1) thin dashed;

cursor: crosshair;

display: inline-block;

}

</style>

</head>

<body>

</div>

///////////////////////////////////////////////////////////////////////

// DECLARE requestAnimFrame

var rAF = window.requestAnimFrame ||

window.mozRequestAnimFrame ||

window.webkitRequestAnimFrame ||

window.msRequestAnimFrame;

var fps = 30;

window.requestAnimFrame = (

function(callback) {

return rAF ||

function(callback) {

window.setTimeout(callback, 1000 / fps);

};

})();

///////////////////////////////////////////////////////////////////////

// DEFINE GLOBAL VARIABLES HERE

var canvas;

var context;

canvas = document.getElementById("fmxCanvas");

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

var canvas1;

var context1;

canvas1 = document.createElement("canvas");

context1 = canvas1.getContext("2d");

canvas1.width = canvas.width;

canvas1.height = canvas.height;

var display;

display = document.getElementById('display');

var counter;

///////////////////////////////////////////////////////////////////////

// DEFINE YOUR GLOBAL VARIABLES HERE

///////////////////////////////////////////////////////////////////////

// CALL THE EVENT LISTENERS

window.addEventListener("load", setup, false);

//////////////////////////////////////////////////////////////////////

// ADD EVENT LISTENERS

canvas.addEventListener("mousemove", mousePos, false);

//////////////////////////////////////////////////////////////////////

// MOUSE COORDINATES

var stage, mouseX, mouseY;

function mousePos(event) {

stage = canvas.getBoundingClientRect();

mouseX = event.clientX - stage.left;

mouseY = event.clientY - stage.top;

}

/////////////////////////////////////////////////////////////////////

// INITIALIZE THE STARTING FUNCTION

function setup() {

/////////////////////////////////////////////////////////////////////

// DECLARE STARTING VALUES OF GLOBAL VARIABLES

counter = 0;

mouseX = canvas.width/2;

mouseY = canvas.height/2;

/////////////////////////////////////////////////////////////////////

// CALL SUBSEQUENT FUNCTIONS, as many as you need

clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS

draw(); // THIS IS WHERE EVERYTHING HAPPENS

}

////////////////////////////////////////////////////////////////////

// CLEAR THE CANVAS FOR ANIMATION

// USE THIS AREA TO MODIFY BKGD

function clear() {

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

context1.clearRect(0,0,canvas.width, canvas.height);

// clear additional contexts here if you have more than canvas1

}

////////////////////////////////////////////////////////////////////

// THIS IS WHERE EVERYTHING HAPPENS

function draw() {

counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS

if (counter > Math.PI*200) { counter = 0; } // RESET COUNTER

clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS

////////////////////////////////////////////////////////////////////

// >>>START HERE>>>START HERE>>>START HERE>>>START HERE>>>START HERE

var grd = context.createLinearGradient(0, 0, 0, 350);

grd.addColorStop(0, "black");

grd.addColorStop(1, "white");

context.fillStyle = grd;

context.fillRect(0, 000, 800, 350);

context.beginPath();

context.moveTo(518,325);

context.lineTo(382,255);

context.lineTo(398,755);

context.closePath();

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

context.fill();

//undercape

context.beginPath();

context.moveTo(0,600);

context.lineTo(460,264);

context.lineTo(496,600);

context.closePath();

context.fillStyle = 'rgb(1,1,2)'

context.fill();0

//cape

context.moveTo(350,405);

context.quadraticCurveTo(600, 300, 150, 850)

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.moveTo(100,505);

context.quadraticCurveTo(250, 650, 400, 250)

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.moveTo(200,435);

context.quadraticCurveTo(350, 350, 450, 550)

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.beginPath();

context.moveTo(200,420);

context.quadraticCurveTo(400, 150, 500, 300)

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

context.beginPath();

var x = 300

var y = 320

var x1 = 275

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(21,21,21)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 530

var y = 320

var x1 = 575

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 500

var y = 320

var x1 = 570

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 330

var y = 300

var x1 = 285

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(21,21,21)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 510

var y = 300

var x1 = 565

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(21,21,21)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 320

var y = 300

var x1 = 275

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 280

var y = 460

var x1 = 275

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 310

var y = 460

var x1 = 285

var y1 = 580

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(51,51,51)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

context.beginPath();

context.arc ( 295,

470,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 295,

490,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 285,

520,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//neck circle

context.beginPath();

context.arc ( 410,

289,

50,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//left side shoulder circle

context.beginPath();

context.arc ( 340,

330,

45,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//right side shoulder circle

context.beginPath();

context.arc ( 480,

330,

45,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//tunic

var x=365;

var y=283;

var width = 100

var height= 328;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 1;

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

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

context.fill();

context.stroke();

//bar cloak outline light grey

var x = 470

var y = 290

var x1 = 445

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 450

var y = 290

var x1 = 425

var y1 = 460

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

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

context.stroke();

var x = 360

var y = 290

var x1 = 365

var y1 = 460

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

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

context.stroke();

var x = 500

var y = 890

var x1 = 415

var y1 = 410

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

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

context.stroke();

var x = 400

var y = 890

var x1 = 365

var y1 = 450

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(55,55,55)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

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

context.stroke();

var x=360;

var y=390;

var width = 65

var height= 65;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

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

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

context.fill();

context.stroke();

//bar cloak outline light grey

var x = 340

var y = 290

var x1 = 365

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 330

var y = 290

var x1 = 355

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 330

var y = 290

var x1 = 355

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 500

var y = 290

var x1 = 475

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 590

var y = 890

var x1 = 470

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 380

var y = 890

var x1 = 360

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 480

var y = 290

var x1 = 455

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 33;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 320

var y = 290

var x1 = 350

var y1 = 490

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(11,11,11)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

context.beginPath();

context.arc ( 510,

330,

40,

.5,

1.1*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

context.fillStyle = 'rgb(130,130,135)';

context.fill();

context.stroke();

context.beginPath();

context.arc ( 320,

335,

40,

.0,

.9*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

context.fillStyle = 'rgb(130,130,135)';

context.fill();

context.stroke();

//control pannel gray box

var x=360;

var y=390;

var width = 60

var height= 60;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 5;

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

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

context.fill();

context.stroke();

var x= 365;

var y = 395;

var x1 = 365;

var y1 = 450;

var x2= 416

var y2= 395

var x3= 416

var y3= 450

//comment

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1); // move to starting coordinates

context.moveTo(x2, y2);

context.lineTo(x3, y3);

context.lineWidth = 5;// declare the width in pixels of the line

context.strokeStyle = 'rgb(255,255,255)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

// 3 gray buttons

var x= 387 //right side of L buttons

var y= 400

var x1= 373 // left side of L buttons

var y1= 400

var x2 = 373

var y2 = 410

var x3 = 387

var y3 = 410

var x4 = 373

var y4 = 420

var x5 = 387

var y5 = 420

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.moveTo(x2, y2);

context.lineTo(x3, y3);

context.moveTo(x4, y4);

context.lineTo(x5, y5);

context.lineWidth = 5;// declare the width in pixels of the line

context.strokeStyle = 'rgb(150,150,150)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

// lower pannel

var x = 376

var y = 430

var x1 = 376

var y1 = 445

var x2 = 386

var y2 = 430

var x3 = 386

var y3 = 445

var x4 = 396

var y4 = 430

var x5 = 396

var y5 = 445

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.moveTo(x2, y2);

context.lineTo(x3, y3);

context.moveTo(x4, y4);

context.lineTo(x5, y5);

context.lineWidth = 5;// declare the width in pixels of the line

context.strokeStyle = 'rgb(210,210,210)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

/// upper red

var x = 393

var y = 415

var x1 = 405

var y1 = 415

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 6;// declare the width in pixels of the line

context.strokeStyle = 'rgb(210,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

// lower red

var x = 405

var y = 430

var x1 = 405

var y1 = 445

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 3;// declare the width in pixels of the line

context.strokeStyle = 'rgb(210,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//blue button

var x = 393

var y = 405

var x1 = 405

var y1 = 405

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 6;

context.strokeStyle = 'rgb(0,0,220)';

context.stroke();

//belt

var x=340;

var y=484;

var width = 150

var height= 28;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 1;

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

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

context.fill();

context.stroke();

//belt square

//belt

var x=382;

var y=483;

var width = 40

var height= 28;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 1;

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

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

context.fill();

context.stroke();

// belt circle

context.beginPath();

context.arc ( 420,

497,

14,

2*Math.PI,

true);

context.lineWidth = 1;

context.closePath();

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

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 420,

497,

10,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//back of helmate

context.beginPath();

context.moveTo(362,170);

context.lineTo(324,244);

context.lineTo(436,244);

context.closePath();

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

context.fill();

context.beginPath();

context.moveTo(452,171);

context.lineTo(492,244);

context.lineTo(356,244);

context.closePath();

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

context.fill();

context.beginPath();

context.moveTo(440,160);

context.lineTo(480,240);

context.lineTo(340,240);

context.closePath();

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

context.fill();

context.beginPath();

context.moveTo(375,160);//top L

context.lineTo(460,240);//right

context.lineTo(335,240);//bottom L

context.closePath();

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

context.fill();

//upper face

context.beginPath();

context.moveTo(365,200);

context.bezierCurveTo(400,50,435,137,450,200);

context.closePath();

context.lineWidth = 2;

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

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

context.fill();

context.stroke();

//lower face

context.beginPath();

context.moveTo(365,200);

context.bezierCurveTo(400,330,450,240,450,200);

context.closePath();

context.lineWidth = 2;

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

context.fillStyle = 'rgb(81,81,82)';

context.fill();

context.stroke();

//cheeks

context.beginPath();

context.moveTo(436,250);//bottom

context.lineTo(450,202);//right

context.lineTo(425,210);//top left

context.closePath();

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

context.fill();0

context.stroke();

context.beginPath();

context.moveTo(383,250);//bottom

context.lineTo(365,200);//left

context.lineTo(391,210);//top right

context.closePath();

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

context.fill();0

context.stroke();

//under mouth

context.beginPath();

context.moveTo(408,205);

context.lineTo(382,255);

context.lineTo(438,255);

context.closePath();

context.fillStyle = 'rgb(210,210,220)'

context.fill();

//mouth

context.beginPath();

context.moveTo(408,205);

context.lineTo(384,254);

context.lineTo(436,254);

context.closePath();

context.fillStyle = 'rgb(21,21,22)'

context.fill();0

//upper nose bridge

context.beginPath();

context.moveTo(405,200);

context.bezierCurveTo(407.5,50,413,200,413,200);

context.closePath();

context.lineWidth = 2;

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

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

context.fill();

context.stroke();

context.beginPath();

context.moveTo(405,215);

context.bezierCurveTo(402,155,410,155,410,215);

context.closePath();

context.lineWidth = 2;

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

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

context.fill();

context.stroke();

//eyes

context.beginPath();

context.arc ( 432,

202,

18,

0.85*Math.PI,

0*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.beginPath();

context.arc ( 384,

201,

18,

0.17*Math.PI,

1*Math.PI,

false);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.beginPath();

context.arc ( 385,

200,

17,

.15*Math.PI,

1*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

context.fillStyle = 'rgb(100,4,4)';

context.fill();

context.stroke();

context.beginPath();

context.arc ( 431,

200,

17,

0*Math.PI,

.85*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

context.fillStyle = 'rgb(100,4,4)';

context.fill();

context.stroke();

//nose square

var x=404;

var y=205;

var width = 7.9

var height= 10;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 1;

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

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

context.fill();

context.stroke();

//nose circle

context.beginPath();

context.arc ( 408,

205,

04,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//mouth circle L

context.beginPath();

context.arc ( 388,

250,

04,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//mouth circle R

context.beginPath();

context.arc ( 431,

250,

04,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//helmate

context.beginPath();

context.moveTo(360,180);

context.quadraticCurveTo(380,100,405,115)

context.quadraticCurveTo(435, 100, 455, 180)

context.closePath();

context.lineWidth = 2;

context.strokeStyle = 'rgb(26,26,25)';

context.fillStyle = 'rgb(26,26,25)';

context.fill();

context.stroke();

//helmate brow back

var x = 375

var y = 170

var x1 = 405

var y1 = 190

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 6;// declare the width in pixels of the line

context.strokeStyle = 'rgb(26,26,26)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x = 430

var y = 170

var x1 = 405

var y1 = 190

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 13;// declare the width in pixels of the line

context.strokeStyle = 'rgb(25,25,25)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//helmate brow

context.beginPath();

context.arc ( 407,

183,

12,

2*Math.PI,

true);

context.lineWidth = 1;

context.strokeStyle = 'rgb(26,26,25)';

context.closePath();

context.fillStyle = 'rgb(26,26,25)';

context.fill();

context.stroke();

// helmate center

var x=401;

var y=110;

var width = 12;

var height= 80;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//center chest armor

context.beginPath();

context.arc ( 410,

320,

45,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//black 1 L

context.beginPath();

context.arc ( 369,

320,

40,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//black 1 r

context.beginPath();

context.arc ( 450,

320,

40,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//chest center

var x=403;

var y=280;

var width = 12;

var height= 80;

context.beginPath();

context.rect(x, y, width, height);

context.lineWidth = 3;

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

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

context.fill();

context.stroke();

//right armor layer 3

context.beginPath();

context.arc ( 475,

320,

45,

2*Math.PI,

false);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//left armor layer 3

context.beginPath();

context.arc ( 348,

320,

45,

0*Math.PI,

.1*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 339,

320,

40,

2.,

1.3*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 330,

320,

40,

1.8,

1.1*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 490,

320,

40,

1.2,

1.8*Math.PI,

false);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 500,

320,

40,

1.2,

1.8*Math.PI,

false);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

// lightsaber hilt

var x= 287 //right side of L buttons

var y= 560

var x1= 327 // left side of L buttons

var y1= 490

var x2 = 373

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgb(15,15,15)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

//hand lightsaber

context.beginPath();

context.arc ( 285,

540,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

// lightsaber hilt

var x= 270 //right side of L buttons

var y= 580

var x1= 290 // left side of L buttons

var y1= 550

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgb(15,15,15)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 135 //right side of L buttons

var y= 780

var x1= 280 // left side of L buttons

var y1= 565

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 10;// declare the width in pixels of the line

context.strokeStyle = 'rgb(250,250,250)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 135 //right side of L buttons

var y= 780

var x1= 280 // left side of L buttons

var y1= 565

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 5;// declare the width in pixels of the line

context.strokeStyle = 'rgb(250,250,250)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

var x= 135 //right side of L buttons

var y= 780

var x1= 280 // left side of L buttons

var y1= 565

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 10;// declare the width in pixels of the line

context.strokeStyle = 'rgb(250,0,0)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

context.beginPath();

context.arc ( 550,

460,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 560,

480,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 560,

500,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 570,

530,

30,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 540,

550,

10,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 560,

570,

15,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

context.beginPath();

context.arc ( 570,

570,

10,

2*Math.PI,

true);

context.lineWidth = 1;

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

context.closePath();

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

context.fill();

context.stroke();

//overcape

context.beginPath();

context.moveTo(0,600);

context.lineTo(150,464);

context.lineTo(80,600);

context.closePath();

context.fillStyle = 'rgb(1,1,2)'

context.fill();0

// <<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE<<<END HERE

///////////////////////////////////////////////////////////////////

// CREDITS

context.save();

var credits = "Joseph Thomas, Lord Vader, FMX 210, FALL 2020";

context.font = 'bold 12px Helvetica';

context.fillStyle = "rgba(0,0,0,1)"; // change the color here

context.shadowColor = "rgba(255,255,255,1)"; // change shadow color here

context.shadowBlur = 12;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.fillText(credits, 10, canvas.height - 10); // CHANGE THE LOCATION HERE

context.restore();

//////////////////////////////////////////////////////////////////

// HTML DISPLAY FIELD FOR TESTING PURPOSES

display.innerHTML = Math.round(mouseX) + " || " + Math.round(mouseY) + " || counter = " + Math.round(counter);

/////////////////////////////////////////////////////////////////

// LAST LINE CREATES THE ANIMATION

requestAnimFrame(draw); // CALLS draw() every nth of a second

}

</script>

</body>

</html>

Comments

Valicia StoeckelNovember 14, 2020 at 6:01 PM
Joseph, I remember seeing this in class and being so impressed. This was such a difficult project and yours came out amazing! It looks just like Darth Vader. I can tell you put a lot of time and effort into this and it shows. All the simple shapes together made something really great.

Search This Blog

Joseph Thomas Tampa Fall 2020

Digital Media, Blog #3 - Canvas Project

Comments

Post a Comment

Popular posts from this blog

Portfolio - Updated

Digital Media, Blog #4 - Adobe Illustrator Tutorials