Digital Media : Canvas HTML Art

Digital Media - Canvas HTML Art

By: Brooke Rivera

The first step was creating what I wanted her to look like. I know I wanted to create a character, but I wasn't sure what I wanted her to look like. My drawing came out differently on Canvas than it did on the graph paper- the hair was originally not in pigtails. I created her head and neck first on DreamWeaver, then I moved on the the nose and mouth, then her eyes and glasses, and finally her hair. The hair was the most difficult part. The very last thing I did was the fun background. I felt like it was boring just with her, so I created a colorful fun background to make her stand out.

Took: 6 Hrs

Code:

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

// Background

for (var i=0; i<canvas.height; i+=10) {

context.beginPath();

var startX = 50;

var startY = 50;

var endX = canvas.width/2;

var endY = canvas.height/2;

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

var circ1X = 50;

var circ1Y = 10;

var circ1Radius = 100;

// outer circle

var circ2X = 20;

var circ2Y = 30;

var circ2Radius = i;

var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);

grd.addColorStop(0, "rgb(201,246,210)");

var N = 0.9;

grd.addColorStop(N, "rgb(252,255,159)");

// outer color

grd.addColorStop(1, "rgb(234,137,235)");

context.fillStyle = grd;

context.fill();

context.stroke();

}

// Curve 2

for (var i=0; i<canvas.height; i+=10) {

var startX = 500;

var startY = i;

var endX = 700;

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+",150,243)";

context.stroke();

}

// Curve 3

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;

var startY = 0;

var endX = i;

var endY = 600;

var cpoint1X = canvas.width/i;

var cpoint1Y = canvas.height/i;

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+","+i/3+",201)";

context.stroke();

}

// Curve 1

for (var i=0; i<canvas.height; i+=10) {

var startX = 600;

var startY = 400;

var endX = i/8;

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1;

context.strokeStyle = "rgb("+i/2+",232,112)";

context.stroke();

}

// Curve 5

for (var i=0; i<canvas.height; i+=5) {

var startX = 600;

var startY = 500;

var endX = 800;

var endY = i/2;

var cpoint1X = i/8;

var cpoint1Y = i/.5;

var cpoint2X = canvas.width*.1/10;

var cpoint2Y = canvas.height*9/10;

// Bezier curve

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb("+i/2+","+i+",234)";

context.stroke();

}

// Curve 3

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;

var startY = 500;

var endX = i;

var endY = 600;

var cpoint1X = canvas.width/i;

var cpoint1Y = canvas.height/i;

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+","+i/3+",116)";

context.stroke();

}

//Curve1

for (var i=0; i<canvas.height; i+=5) {

var startX = 600;

var startY = 200;

var endX = i/8;

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+",150,243)";

context.stroke();

}

// Curve 2

for (var i=0; i<canvas.height; i+=10) {

var startX = 600;

var startY = 650;

var endX = i/8;

var endY = i/5;

var cpoint1X = canvas.width/2;

var cpoint1Y = canvas.height/2;

var cpoint2X = i;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 5;

context.strokeStyle = "rgb("+i/2+","+i/3+",240)";

context.stroke();

}

// Curve 2

for (var i=0; i<canvas.height; i+=5) {

var startX = 0;

var startY = 600;

var endX = 0;

var endY = i;

var cpoint1X = canvas.width/1/10;

var cpoint1Y = canvas.height/2;

var cpoint2X = i*2;

var cpoint2Y = 150;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb(251, 228, 255)///("+i/2+",150,243)";

context.stroke();

}

// Curve 4

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;

var startY = i/4;

var endX = 900;

var endY = 400;

var cpoint1X = 200;

var cpoint1Y = i/.5;

var cpoint2X = canvas.width*1/10;

var cpoint2Y = canvas.height*9/10;

//Bezier curve

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 1.5;

context.strokeStyle = "rgb(106, 229, 223)";

context.stroke();

}

// Curve 4

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;

var startY = 300;

var endX = 900;

var endY = 400;

var cpoint1X = 200;

var cpoint1Y = i/.5;

var cpoint2X = canvas.width*.1/10;

var cpoint2Y = canvas.height*9/10;

//Bezier curve

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb(192, 227, 251)";

context.stroke();

}

// Curve5

for (var i=0; i<canvas.height; i+=5) {

var startX = 800;

var startY = 500;

var endX = 900;

var endY = 400;

var cpoint1X = 200;

var cpoint1Y = i/.5;

var cpoint2X = canvas.width*6/10;

var cpoint2Y = canvas.height*9/10;

context.beginPath();

context.moveTo(startX, startY);

context.bezierCurveTo(cpoint1X, cpoint1Y , cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 2;

context.strokeStyle = "rgb(192, 250, 251)";

context.stroke();

}

//NECK

context.beginPath();

//context.moveTo(350, 350);

context.lineTo(250, 600);

context.quadraticCurveTo(360, 550, 250, 300);

context.lineTo(550, 300);

context.quadraticCurveTo(350, 570, 700, 700);

var neck = context.createLinearGradient(0,0,300,600);

neck.addColorStop(0., "rgb(247, 235, 175)");

neck.addColorStop(1, "rgb(244, 236, 194)");

context.closePath();

context.strokeStyle = 'black';

context.stroke();

context.fillStyle = neck;

context.fill();

///HEAD

context.beginPath();

context.moveTo(400, 500); //starting point

context.bezierCurveTo(750,300,500,-200,300,0);

context.bezierCurveTo(385,-100,-10,200,400,500);

context.closePath();

context.fillStyle = head;

var head = context.createRadialGradient(200, 200, 350, 300, 500, 350);

head.addColorStop(0, "tan");

head.addColorStop(1, "tan");

context.strokeStyle = "black";

context.stroke();

context.fill();

//SMILE

context.beginPath();

context.moveTo(350, 440);

context.quadraticCurveTo(400, 460, 440, 440);

context.lineTo(350, 440);

context.stroke();

context.fillStyle = "rgb(253, 244, 254)";

context.fill();

//left eye

context.beginPath();

context.moveTo(335, 215);

context.lineTo(335, 250);

context.lineWidth = 76;

context.strokeStyle = "rgba(93,38,6,.70)";

context.lineCap = 'round';

context.stroke();

context.closePath();

// left eye inner

context.beginPath();

context.moveTo(335, 215);

context.lineTo(335, 250);

context.lineWidth = 68;

context.strokeStyle = "rgba(187,154,116,.12)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//right eye middle

context.beginPath();

context.moveTo(445, 240);

context.lineTo(445, 250);

context.lineWidth = 66;

context.strokeStyle = "rgba(255,255,255,.32)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//right eye inner

context.beginPath();

context.moveTo(445, 215);

context.lineTo(445, 250);

context.lineWidth = 68;

context.strokeStyle = "rgba(187,154,116,.12)";

context.lineCap = 'round';

context.stroke();

context.closePath();

// right eye

context.beginPath();

context.moveTo(445, 215);

context.lineTo(445, 250);

context.lineWidth = 76;

context.strokeStyle = "rgba(93,38,6,.70)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//left eye middle

context.beginPath();

context.moveTo(335, 240);

context.lineTo(335, 250);

context.lineWidth = 66;

context.strokeStyle = "rgba(255,255,255,.32)";

context.lineCap = 'round';

context.stroke();

context.closePath();

// left eye glare

context.beginPath();

context.moveTo(335, 240);

context.lineTo(335, 252);

context.lineWidth = 45;

context.strokeStyle = "rgba(255,255,255,.66)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//right eye glare

context.beginPath();

context.moveTo(445, 240);

context.lineTo(445, 252);

context.lineWidth = 45;

context.strokeStyle = "rgba(255,255,255,.66)";

context.lineCap = 'round';

context.stroke();

context.closePath();

// right eye middle

context.beginPath();

context.moveTo(445, 240);

context.lineTo(445, 252);

context.lineWidth = 66;

context.strokeStyle = "rgba(255,255,255,.32)";

context.lineCap = 'round';

context.stroke();

//left eye pupil

context.beginPath();

context.moveTo(335, 242);

context.lineTo(335, 246);

context.lineWidth = 12;

context.strokeStyle = "rgb(97,52,1)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//right eye pupil

context.beginPath();

context.moveTo(445, 242);

context.lineTo(445, 246);

context.lineWidth = 12;

context.strokeStyle = "rgb(97,52,1)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//left glasees

var x=280;

var y=190;

var width = 100

var height= 100;

context.beginPath();

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

context.lineWidth = 11;

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

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

context.lineCap = 'round';

context.stroke();

context.closePath();

//right glasses

var x=400;

var y=190;

var width = 95

var height= 100;

context.beginPath();

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

context.lineWidth = 11;

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

context.strokeStyle = 'rgb(51,29,4)';

context.lineCap = 'round';

context.stroke();

context.closePath();

//center of glasses

context.beginPath();

context.moveTo(390, 255);

context.lineTo(390, 250);

context.lineWidth = 13;

context.strokeStyle = "rgb(51,29,4)";

context.lineCap = 'round';

context.stroke();

context.closePath();

//left hair

var Ax = 300;

var Ay = -60;

var Bx = 400;

var By = 580;

var control1x = 360;

var control1y = 40;

var control2x = -50;

var control2y = 10;

var control3x = 70;

var control3y = 650;

var control4x = 390;

var control4y = 70;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

context.lineWidth = 6;

// line color

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

context.lineCap = 'round';

context.stroke();

context.fillStyle = 'rgb(47, 21, 3)';

context.fill();

//right hair

var Ax = 440;

var Ay = 5;

var Bx = 550;

var By = 590;

var control1x = 460;

var control1y = 40;

var control2x = 695;

var control2y = 400;

var control3x = 250;

var control3y = 610;

var control4x = 920;

var control4y = -50;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

context.lineWidth = 6;

// line color

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

context.lineCap = 'round';

context.stroke();

context.fillStyle = 'rgb(47, 21, 3)';

context.fill();

// bangs

var Ax = 500;

var Ay = 0;

var Bx = 261;

var By = 15;

var control1x = 300;

var control1y = 40;

var control2x = 420;

var control2y = -350;

var control3x = 670;

var control3y = 450;

var control4x = 590;

var control4y = 70;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

context.lineWidth = 5;

// line color

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

context.lineCap = 'round';

context.stroke();

context.fillStyle = 'rgb(47, 21, 3)';

context.fill();

//NOSE

context.beginPath();

context.moveTo(400, 370);

context.lineTo(400, 373);

context.lineWidth = 3;

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

context.lineCap = 'round';

context.stroke();

context.closePath();

////////////////////////////////////// ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>

</head>

<body>

</body>

</html>

Digital Media

Tuesday, February 12, 2019

Canvas HTML Art

No comments:

Post a Comment

Blog Archive