Beginning Digital Arts: Canvas Project 1 Final Product and Process Photos

The Final Product!

Here are the pictures of me making my project from concept to art:

Struggling along to figure out how to make letters!

Hours among discouraging hours after, beyond the hellish "S" I have completed my sentence! Moving on...

I spent a lot of time altering the smiley face so that it could be put onto the sentence I had made.

I learned the hard way that if you're putting on complicated features, it would be best to do so on the MAIN canvas.

The little man has begun his walk!

Looking good! BUT one more little touch.

A couple more, minor tweaks and.....

PEACE LOVE AND THE 60s! : )

Original idea

Working on my psychedelic circles!

Another twist in the original plan.

The idea came to me shortly after the previous ones and it was settled.

Almost decided to take an even goofier route....

...decided against it.

The beloved code itself:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

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

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

// INNER INNER CIRCLE
var circ0X = canvas.width/2;
var circ0Y = canvas.height/2;
var circ0Radius = 165;

// INNER CIRCLE
var circ1X = canvas.width/2;
var circ1Y = canvas.height/2;
var circ1Radius = 850;

// OUTER CIRCLE
var circ2X = canvas.width/2;
var circ2Y = canvas.height/2;
var circ2Radius = 9500;

// CREATE RADIAL GRADIENT
var grd = context.createRadialGradient(circ0X, circ0Y, circ0Radius, circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);

//CENTER COLOR
grd.addColorStop(0, "rgb(0,255,0)");

grd.addColorStop(.02, "#0FFFF0");

// INNER INNER COLOR
grd.addColorStop(.10, "rgb(255,255,0)");

// INNER COLOR
grd.addColorStop(.20, "rgb(255,0,0)");

grd.addColorStop(.5, "rgb(0,0,255)");

// OUTER COLOR
grd.addColorStop(1, "rgb(0,255,0)");

context.fillStyle = grd;
context.fill();
// LINE OF TEXT
// "T"
var startX = 25;
var startY = canvas.height/2;
var endX = 75;
var endY = canvas.height/2;
// TOP OF THE "T"
context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "FFFFFF"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//BOTTOM OF "T"
var startX = 50;
var startY = canvas.height/2;
var endX = 50;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//"A"
var startX = 75;
var startY = canvas.height/2+50;

// Ending Point Coordinates
var endX = 95;
var endY = canvas.height/2+50;

// Control Point Coordinates ( Magnet)
var cpointX = 85;
var cpointY = 250;

// DRAW THE CURVE

context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

var startX = 76.5;
var startY = canvas.height/2+30;
var endX = 90;
var endY = canvas.height/2+30;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//"K"
//LINE 1 OF THE K
var startX = 105;
var startY = canvas.height/2;
var endX = 105;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//DIAGNONAL LINE UP
var startX = 105;
var startY = canvas.height/2+25;
var endX = 120;
var endY = canvas.height/2;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//DIAGONAL LINE DOWN
var startX = 105;
var startY = canvas.height/2+25;
var endX = 120;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
// "E"
//THE MAIN LINE
var startX = 130;
var startY = canvas.height/2;
var endX = 130;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//TOP BAR OF THE E
var startX = 130;
var startY = canvas.height/2;
var endX = 150;
var endY = canvas.height/2;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//MIDDLE BAR OF THE E
var startX = 130;
var startY = canvas.height/2+25;
var endX = 150;
var endY = canvas.height/2+25;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//BOTTOM BAR OF THE E
var startX = 130;
var startY = canvas.height/2+50;
var endX = 150;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

// "A"
var startX = 170;
var startY = canvas.height/2+50;

// Ending Point Coordinates
var endX = 190;
var endY = canvas.height/2+50;

// Control Point Coordinates ( Magnet)
var cpointX = 180;
var cpointY = 250;

// DRAW THE CURVE
//CURVE OF THE "A"
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//STRAIGHT LINE OF THE "A"
var startX = 175;
var startY = canvas.height/2+30;
var endX = 185;
var endY = canvas.height/2+30;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//"W"
var startX = 210;
var startY = canvas.height/2;

// Ending Point Coordinates
var endX = 240;
var endY = canvas.height/2;

// Control Point Coordinates ( Magnet)
var cpointX = 230;
var cpointY = 400;

// DRAW THE CURVE
//CURVE OF THE "W"1
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//CURVE OF THE "W"2
var startX = 240;
var startY = canvas.height/2;

// Ending Point Coordinates
var endX = 270;
var endY = canvas.height/2;

// Control Point Coordinates ( Magnet)
var cpointX = 250;
var cpointY = 400;

context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//"A"
var startX = 270;
var startY = canvas.height/2+50;

// Ending Point Coordinates
var endX = 290;
var endY = canvas.height/2+50;

// Control Point Coordinates ( Magnet)
var cpointX = 280;
var cpointY = 250;

// DRAW THE CURVE
//CURVE OF THE "A"
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//STRAIGHT LINE OF THE "A"
var startX = 275;
var startY = canvas.height/2+30;
var endX = 285;
var endY = canvas.height/2+30;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//"L" of WALK
var startX = 300;
var startY = canvas.height/2;

// Ending Point Coordinates
var endX = 330;
var endY = canvas.height/2+45;

// Control Point Coordinates ( Magnet)
var cpointX = 285;
var cpointY = 360;

// DRAW THE CURVE
//CURVE OF THE "A"
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//"K"
var startX = 340;
var startY = canvas.height/2;
var endX = 340;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//DIAGNONAL LINE UP
var startX = 340;
var startY = canvas.height/2+25;
var endX = 360;
var endY = canvas.height/2;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//DIAGONAL LINE DOWN
var startX = 340;
var startY = canvas.height/2+25;
var endX = 360;
var endY = canvas.height/2+50;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//"O"
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(canvas.width/2-10, canvas.height/2+10, 20, 0, Math.PI*2, true);
context.lineWidth = 4;
context.lineCap = "round"; // "square" or "round" or "butt"
//context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//"N"
//FIRST LINE OF "N"
var startX = canvas.width/2+15;
var startY = canvas.height/2+5;
var endX = canvas.width/2+15;
var endY = canvas.height/2+45;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "butt"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//SECOND LINE OF "N"
var startX = canvas.width/2+15;
var startY = canvas.height/2+5;
var endX = canvas.width/2+40;
var endY = canvas.height/2+43;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
// LAST LINE OF "N"
var startX = canvas.width/2+40;
var startY = canvas.height/2+43;
var endX = canvas.width/2+43;
var endY = canvas.height/2+10;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//LOWERCASE "t"
var startX = 470;
var startY = canvas.height/2+5;
var endX = 480;
var endY = canvas.height/2+40;
// BOTTOM OF THE "T"
context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "FFFFFF"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//TOP OF "T"
var startX = 450;
var startY = canvas.height/2+10;
var endX = 480;
var endY = canvas.height/2;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//LETTER "H"
//context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.beginPath();
context.lineWidth = 5;
context.moveTo(490, canvas.height/2);
context.lineTo(490, canvas.height/2+43);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "FFFFFF"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//MIDDLE LINE OF "H"
//context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.beginPath();
context.lineWidth = 5;
context.moveTo(491, canvas.height/2+21.5);
context.lineTo(509, canvas.height/2+21.5);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "FFFFFF"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//ENDING LINE OF "H"
//context.moveTo(startX, startY);
//context.lineTo(endX, endY);
context.beginPath();
context.lineWidth = 5;
context.moveTo(510, canvas.height/2);
context.lineTo(510, canvas.height/2+43);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "FFFFFF"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//LETTER "E"
// "E"
//THE MAIN LINE
var startX = 520;
var startY = canvas.height/2;
var endX = 520;
var endY = canvas.height/2+45;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//TOP BAR OF THE E
var startX = 521;
var startY = canvas.height/2;
var endX = 535;
var endY = canvas.height/2;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//MIDDLE BAR OF THE E
var startX = 521;
var startY = canvas.height/2+25;
var endX = 535;
var endY = canvas.height/2+25;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//BOTTOM BAR OF THE E
var startX = 521;
var startY = canvas.height/2+45;
var endX = 535;
var endY = canvas.height/2+45;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round";
context.strokeStyle = "#000000";
context.stroke();

//"W"
var startX = 550;
var startY = canvas.height/2;

// Ending Point Coordinates
var endX = 575;
var endY = canvas.height/2;

// Control Point Coordinates ( Magnet)
var cpointX = 570;
var cpointY = 400;

// DRAW THE CURVE
//CURVE OF THE "W"1
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();
//CURVE OF THE "W"2
var startX = 575;
var startY = canvas.height/2;

// Ending Point Coordinates
var endX = 600;
var endY = canvas.height/2;

// Control Point Coordinates ( Magnet)
var cpointX = 590;
var cpointY = 400;

context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//LETTER "I"
//MIDDLE LINE OF "I"
context.beginPath();
context.lineWidth = 5;
context.moveTo(615, canvas.height/2+10);
context.lineTo(615, canvas.height/2+50);
context.lineCap = "round";
context.strokeStyle = "#000000";
context.stroke();

//EYE OF THE "I"
//THE EYE
context.beginPath();
context.arc(615, 290, 10, 0, Math.PI*2, false);
context.lineWidth = 2;
context.lineCap = "round";
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.stroke();
//THE IRIS
context.beginPath();
context.arc(615, 290, 7, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round";
context.fillStyle = "rgb(0,255,55)";
context.fill();
context.stroke();
//THE PUPIL
context.beginPath();
context.arc(615, 290, 3, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();
//centerX = 615: centerY = canvas.height - x
//SECOND EYE OF THE "I"
context.beginPath();
context.arc(714, 290, 10, 0, Math.PI*2, false);
context.lineWidth = 2;
context.lineCap = "round";
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.stroke();
//IRIS OF 2ND EYE
context.beginPath();
context.arc(714, 290, 7, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round";
context.fillStyle = "rgb(0,105,255)";
context.fill();
context.stroke();
//PUPIL OF 2ND EYE
context.beginPath();
context.arc(714, 290, 3, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();
//LETTER "L"
//"L" of WALK
var startX = 630;
var startY = canvas.height/2+5;

// Ending Point Coordinates
var endX = 645;
var endY = canvas.height/2+45;

// Control Point Coordinates ( Magnet)
var cpointX = 610;
var cpointY = 360;

// DRAW THE CURVE
//CURVE OF THE "A"
context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,0,0)";
context.stroke();

//LETTER "D"
//LINE of "D"
context.beginPath();
context.moveTo(655, canvas.height/2);
context.lineTo(655,canvas.height/2+50);
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//CURVE OF "D"
context.beginPath();
context.moveTo(655,canvas.height/2)
context.quadraticCurveTo( 685, canvas.height/2+25, 655, canvas.height/2+50)
context.lineWidth = 5;
context.strokeStyle = "black"
context.stroke();

//LETTER "S"
//TOP HALF OF "S"
context.beginPath();
context.arc(700,canvas.height/2+5, 10, 30, 90, true);
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//BOTTOM HALF "S"
context.beginPath();
context.arc(695,canvas.height/2+24.5, 10, -30, 55, true);
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

//LETTER "I"
context.beginPath();
context.moveTo(715,canvas.height/2+10);
context.lineTo(715,canvas.height/2+40);
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

//LETTER "D"
//LINE of "D"
context.beginPath();
context.moveTo(723, canvas.height/2);
context.lineTo(723,canvas.height/2+50);
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//CURVE OF "D"
context.beginPath();
context.moveTo(725,canvas.height/2)
context.quadraticCurveTo( 745, canvas.height/2+25, 725, canvas.height/2+50)
context.lineWidth = 5;
context.strokeStyle = "black"
context.stroke();

//LETTER "E"
//THE MAIN LINE
var startX = 740;
var startY = canvas.height/2+10;
var endX = 740;
var endY = canvas.height/2+40;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//TOP BAR OF THE E
var startX = 740;
var startY = canvas.height/2+10;
var endX = 760;
var endY = canvas.height/2+10;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//MIDDLE BAR OF THE E
var startX = 740;
var startY = canvas.height/2+25;
var endX = 760;
var endY = canvas.height/2+25;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//BOTTOM BAR OF THE E
var startX = 740;
var startY = canvas.height/2+40;
var endX = 760;
var endY = canvas.height/2+40;

context.beginPath();
context.lineWidth = 5;
context.moveTo(startX, startY);
context.lineTo(endX, endY);
context.lineCap = "round"; // "square" or "round" or "butt"
context.strokeStyle = "#000000"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//EXCLAMATION MARK !!!
context.beginPath();
context.moveTo(770,canvas.height/2-10);
context.lineTo(770, canvas.height/2+25);
context.lineCap = "round";
context.strokeStyle = "black";
context.stroke();

//EXCLAMATION POINT
context.beginPath();
context.arc(770, canvas.height/2+40, 5, 0, Math.PI*2, true);
context.lineWidth = 5;
context.lineCap = "round";
context.fillStyle = "rgb(0,0,0)";
context.fill();
context.stroke();

//START SMILEY CHARACTER----------------------------------------------------------------------------------------SMILEY CHARACTER
//FACE

context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(canvas.width/2+40, 175, 50, 0, Math.PI*2, true);
context.lineWidth = 2;
context.lineCap = "square"; // "square" or "round" or "butt"
context.fillStyle = "rgb(255,255,0)";
context.fill();
//context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//SMILE
context.beginPath();
context.arc(canvas.width/2+40, 195, 22.5, 360, Math.PI, true);
context.lineWidth = 3;
context.fillStyle = "black";
context.fill();
context.lineCap = "round";
context.stroke();

//LEFT EYE
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(422.5, 150, 18, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" or "round" or "butt"
context.fillStyle = "rgb(255,255,255)";
context.fill();
//context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//LEFT IRIS
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(422.5, 150, 14.75, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" or "round" or "butt"
context.fillStyle = "rgb(0,255,55)";
context.fill();
//context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//LEFT PUPIL
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(422.5, 150, 11.5, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" or "round" or "butt"
context.fillStyle = "rgb(0,0,0)";
context.fill();
//context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();

//RIGHT EYE
context.beginPath();
context.arc(460, 150, 18, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" or "round" or "butt"
context.fillStyle = "rgb(255,255,255)";
context.fill();
context.stroke();

//RIGHT IRIS
context.beginPath();
context.arc(460, 150, 14.75, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" or "round" or "butt"
context.fillStyle = "rgb(0,255,55)";
context.fill();
context.stroke();

//RIGHT PUPIL
context.beginPath();
// context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.arc(460, 150, 11.5, 0, Math.PI*2, false);
context.lineWidth = 1;
context.lineCap = "round"; // "square" or "round" or "butt"
context.fillStyle = "rgb(0,0,0)";
context.fill();
//context.strokeStyle = "rgb("+r+","+g+","+b+")"; // "#FF00FF" or "rgb(x,y,z)"
context.stroke();
//BODY OF SMILEY CHARACTER

//TORSO
context.beginPath();
context.moveTo(440, 215);
context.lineTo(450, 270);
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
//LEFT LEG
context.beginPath();
context.moveTo(450,270);
context.lineTo(415,305);
context.lineWidth = 5;
context.stokeStyle = "black";
context.stroke();
//RIGHT LEG
context.beginPath();
context.moveTo(450,270);
context.lineTo(465,305);
context.lineWidth = 5;
context.stokeStyle = "black";
context.stroke();
//ARMS
//LEFT ARM
context.beginPath();
context.moveTo(400,260);
context.lineTo(445,250);
context.lineWidth = 5;
context.stokeStyle = "black";
context.stroke();
//CIGARETTE
//CIGARETTE STICK
context.beginPath();
context.rect(370,258, 30, 5);
context.fillStyle = "rgb(250,250,250)";
context.fill();
context.lineWidth = 1;
context.stokeStyle = "black";
context.stroke();
//CIGARETTE BUTT
context.beginPath();
context.rect(390,258, 10, 5);
context.fillStyle = "brown";
context.fill();
context.lineWidth = 1;
context.stokeStyle = "black";
context.stroke();

//RIGHT ARM
context.beginPath();
context.moveTo(446,250);
context.lineTo(490,230);
context.lineWidth = 5;
context.stokeStyle = "black";
context.stroke();
//PEACE SIGN
//MAIN CIRCLE
context.beginPath();
context.arc(510,220, 20, 0, 2*Math.PI, true);
context.lineWidth = 2;
context.strokeStyle = "magenta";
context.stroke();
//LINE DOWN
context.beginPath();
context.moveTo(510,200);
context.lineTo(510,240);
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//DIAGONAL LINE LEFT
context.beginPath();
context.moveTo(510,220);
context.lineTo(495,233);
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
//DIAGONAL LINE RIGHT
context.beginPath();
context.moveTo(510,220);
context.lineTo(525,233);
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();

//CIGARETTE EMBER
context.beginPath();
context.arc(370,260.5, 2, 0, Math.PI*2, true);
context.strokeStyle = "red";
context.lineWidth = 3;
context.fillStyle = "red";
context.fill();
context.stroke();
//CIGARETTE SMOKE
context.beginPath();
context.arc(370, 255, 2, 0, 2*Math.PI/3, true);
context.strokeStyle = "rgb(245,245,245)";
context.lineWidth = 1.5;
context.stroke();

//TONGUE

context.beginPath();
context.moveTo(418, 190);
context.bezierCurveTo(390, 200, 460, 290, 463.5, 190);
context.bezierCurveTo(435, 180, 440, 198,418, 190);
var grd = context.createLinearGradient(360, canvas.height/2+35, 440, 350);
grd.addColorStop(0, "rgb(255,0,0)");
grd.addColorStop(.5, "rgb(235,15,20)");
grd.addColorStop(1, "rgb(225,25,30)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1;
context.strokeStyle = "red";
context.stroke();
context.closePath();

//DRUG STRIP
context.beginPath();
context.rect(432, 200, 15,18.5);
context.fillStyle = "rgb(155,155,255)";
context.fill();

var grd = context.createLinearGradient(445, 200, 445, 240);
grd.addColorStop(0, "rgb(0,255,135)");
grd.addColorStop(1, "rgb(0,0,255)");
context.fillStyle = grd;
context.fill();
context.lineWidth = 1.5;
context.strokeStyle = "purple";
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Beginning Digital Arts

Tuesday, May 29, 2012

Canvas Project 1 Final Product and Process Photos

No comments:

Post a Comment

About Me