Digital Arts

The Dancing Skirt

<!DOCTYPE HTML>

<html>

<head>

window.onload = function() {

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

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

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

//CANVAS SIZE//

var x = 0;

var y = 0;

var width = 800;

var height = 600;

//BACKGROUND GRADIENT//

context.beginPath();

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

context.fillStyle = 'green';

// add linear gradient

var grd = context.createLinearGradient(400, 0, 400, 450);

// PURPLE

grd.addColorStop(0, "#330066");

// dark blue

grd.addColorStop(1, "#004");

context.fillStyle = grd;

context.fill();

context.closePath();

// add stroke // CANVAS BORDER//

context.lineWidth = 0;

context.strokeStyle = "blue";

context.stroke();

context.fill();

context.lineWidth = 0;

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

context.stroke();

context.closePath();

//SKIRT//

//LIGHT HANDLE 1//

var x = 50;

var y = 0;

var x1 = 50;

var y1 = 25;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT HANDLE 2//

var x = 150;

var y = 0;

var x1 = 150;

var y1 = 50;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT HANDLE 3//

var x = 250;

var y = 0;

var x1 = 250;

var y1 = 25;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT HANDLE 4//

var x = 400;

var y = 0;

var x1 = 400;

var y1 = 75;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT HANDLE 5//

var x = 550;

var y = 0;

var x1 = 550;

var y1 = 25;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT HANDLE 6//

var x = 650;

var y = 0;

var x1 = 650;

var y1 = 50;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT HANDLE 7//

var x = 750;

var y = 0;

var x1 = 750;

var y1 = 25;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.stroke();

context.closePath();

//LIGHT ORB 1//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(50, 26, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2;

context.strokeStyle = "rgb(255,153,255)";

context.stroke();

context.closePath();

//LIGHT ORB 2//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI; context.beginPath();

context.arc(150, 51, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2;

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

context.stroke();

context.closePath();

//LIGHT ORB 3//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(250, 26, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2;

context.strokeStyle = "rgb(255,153,255)";

context.stroke();

context.closePath();

//LIGHT ORB 4//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 65;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(400, 126, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 3;

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

context.stroke();

context.closePath();

//LIGHT ORB 5//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(550, 26, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2;

context.strokeStyle = "rgb(255,153,255)";

context.stroke();

context.closePath();

//LIGHT ORB 6//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(650, 51, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2;

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

context.stroke();

context.closePath();

//LIGHT ORB 7//

var centerX = canvas.width / 2;

var centerY = canvas.height / 2;

var radius = 15;

var startangle = 0;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(750, 26, radius, startangle, endangle, false);

// context.fillStyle = "green";

var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 0);

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

grd.addColorStop(1, "rgb(255,153,51)");

context.fillStyle = grd;

context.fill();

context.lineWidth = 2;

context.strokeStyle = "rgb(255,153,255)";

context.stroke();

context.closePath();

//LEFT EAR//

context.beginPath();

context.arc(580, 250, 12, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//RIGHT EAR//

context.beginPath();

context.arc(690, 250, 12, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//HEAD//

context.beginPath();

context.arc(635, 250, 60, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//LEFT EYE//

context.beginPath();

context.arc(610, 248, 8, 0, 2 * Math.PI, false);

context.fillStyle = "#FFFFFF";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//LEFT IRIS//

context.beginPath();

context.arc(610, 248, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#2A120A";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//RIGHT EYE//

context.beginPath();

context.arc(650, 248, 8, 0, 2 * Math.PI, false);

context.fillStyle = "#FFFFFF";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//RIGHT IRIS//

//LEFT IRIS//

context.beginPath();

context.arc(650, 248, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#2A120A";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//MOUTH//

var centerX = canvas.width / 2;

var centerY = canvas.height / 1;

var radius = 15;

var startangle = Math.PI;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(632, 280, radius, startangle, endangle, true);

context.fillStyle = "red";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//TEETH//

var x = 617;

var y = 285;

var x1 = 647;

var y1 = y;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 2

context.strokeStyle = "black";

context.stroke();

context.closePath();

var x = 617;

var y = 282;

var x1 = 647;

var y1 = y;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineWidth = 4

context.strokeStyle = "white";

context.stroke();

context.closePath();

//TONGUE//

var centerX = canvas.width / 2;

var centerY = canvas.height / 1;

var radius = 9;

var startangle = Math.PI;

var endangle = 2 * Math.PI;

context.beginPath();

context.arc(632, 286, radius, startangle, endangle, true);

context.fillStyle = "#F7819F";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//SKIRT//

// Set the style properties.

context.fillStyle = 'rgb(249, 63, 174)';

context.strokeStyle = 'rgb(253, 154, 201)';

context.lineWidth = 3;

context.beginPath();

// Start from the far-left point.

context.moveTo(350, 550); // give the (x, y) coordinates

context.lineTo(450, 550);

context.lineTo(400, 450);

context.lineTo(350, 550);

context.fill();

context.stroke();'rgb(153, 153, 255)';

context.closePath();

//SHIRT//

var x = 598;

var y = 310;

var width = 75;

var height = 60;

context.beginPath();

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

context.fillStyle = 'rgb(249, 63, 174)';

context.fill();'rgb(0, 0, 0)'

context.lineWidth = 5;

context.strokeStyle = 'rgb(253, 154, 201)';

context.stroke()

context.closePath();

//LEFT SHOULDER//

context.beginPath();

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

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//RIGHT SHOULDER//

context.beginPath();

context.arc(670, 320, 15, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//LEFT ARM//

context.beginPath();

context.rect(590, 320, 20, 70);

context.fillStyle = '#61380B';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'transparent';

context.stroke()

context.closePath();

//RIGT ARM//

context.beginPath();

context.rect(660, 320, 20, 70);

context.fillStyle = '#61380B';

context.fill();

context.lineWidth = 5;

context.strokeStyle = 'transparent';

context.stroke()

context.closePath();

//LEFT HAND//

context.beginPath();

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

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//LEFT DIGITALS//

context.beginPath();

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

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(610, 406, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(613, 398, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(590, 405, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(589, 396, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//RIGHT HAND//

context.beginPath();

context.arc(670, 395, 12, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//RIGHT DIGITALS//

context.beginPath();

context.arc(670, 408, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(680, 405, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(660, 405, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(683, 396, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill(); context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

context.beginPath();

context.arc(658, 396, 5, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0;

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//NECK//

context.beginPath();

context.arc(635, 315, 16, 0, 2 * Math.PI, false);

context.fillStyle = "#61380B";

context.fill();

context.lineWidth = 0

context.strokeStyle = "Transparent";

context.stroke();

context.closePath();

//CHEST//

var x = 622;

var y = 325;

var x1 = 630;

var y1 = 325;

var x2 = 648;

var y2 = 325;

var x3 = 635;

var y3 = 350;

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1);

context.lineTo(x2, y2);

context.lineTo(x3, y3);

context.fillStyle = '#61380B';

context.fill();

context.stroke();

context.closePath();

//LEFT EARRING//

context.beginPath();

context.arc(572, 262, 4, 0, 2 * Math.PI, false);

context.fillStyle = "#ffffff";

context.fill();

context.lineWidth = 0

context.strokeStyle = "#A2A7B6";

context.stroke();

context.closePath();

//RIGHT EARRING//

context.beginPath();

context.arc(696, 262, 4, 0, 2 * Math.PI, false);

context.fillStyle = "#ffffff";

context.fill();

context.lineWidth = 0

context.strokeStyle = "#A2A7B6";

context.stroke();

context.closePath()

//CARTILAGE PIERCING//

context.beginPath();

context.arc(570, 243, 1, 0, 2 * Math.PI, false);

context.fillStyle = "#ffffff";

context.fill();

context.lineWidth = 0

context.strokeStyle = "#A2A7B6";

context.stroke();

context.closePath();

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

};

</script>

</head>

<body>

</body>

</html>

Friday, May 8, 2015