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>
<script>
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>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
