ART 210: CANVAS HTML5: WORKING WITH QUADRATIC AND BEZIER CURVES

HTML 5 CODE:

<!DOCTYPE HTML>

<html>

<head>

<title> Hedwig </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: #000;

}

body {

background-color: #FFF;

}

</style>

</head>

<body>

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

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

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

//background

var background = context.createRadialGradient(100,400,10,400,300,400);

background.addColorStop(0,"grey");

//background.addColorStop(0.5,"grey");

background.addColorStop(1,"black");

context.beginPath();

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

context.fillStyle = background;

context.fill();

context.closePath();

///body and head

context.beginPath();

context.moveTo(70,310);

context.quadraticCurveTo(30,220,100,180);

context.lineTo(100,180);

context.bezierCurveTo(110,70,210,70,220,180);

context.lineTo(220,180);

context.quadraticCurveTo(280,210,230,300);

context.fillStyle = "white";

context.fill();

context.strokeStyle = "black";

context.stroke();

context.closePath();

//right wing

context.beginPath();

context.moveTo(220,180);

context.bezierCurveTo(250,130,200,30,310,120);

context.lineTo(310,120);

context.quadraticCurveTo(400,200,290,140);

context.quadraticCurveTo(400,210,270,150);

context.quadraticCurveTo(400,220,270,170);

context.quadraticCurveTo(400,230,270,190);

context.quadraticCurveTo(380,245,280,215);

context.quadraticCurveTo(350,270,285,240);

context.quadraticCurveTo(345,290,250,245);

context.quadraticCurveTo(320,293,245,260);

context.quadraticCurveTo(300,295,240,275);

context.quadraticCurveTo(290,300,238,285);

context.quadraticCurveTo(280,310,230,295);

context.fillStyle = "white";

context.fill();

context.strokeStyle = "black";

context.stroke();

context.closePath();

//book 1

context.beginPath();

context.moveTo(20,312);

context.lineTo(290,298);

context.lineTo(290,336);

context.lineTo(20,350);

context.lineTo(20,312);

context.lineWidth = 2;

context.fillStyle = "rgb(67,0,125)";

context.fill();

context.strokeStyle = "black";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(20,312);

context.quadraticCurveTo(10,331,20,350);

context.strokeStyle = "black";

context.fillStyle = "rgb(67,0,125)";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(290,298);

context.quadraticCurveTo(300,319,290,336);

context.strokeStyle = "black";

context.fillStyle = "rgb(67,0,125)";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(50,312);

context.lineTo(70,310);

context.lineTo(70,347);

context.lineTo(50,348);

context.lineTo(50,312);

context.fillStyle = "rgb(106,76,135)";

context.fill();

context.strokeStyle = "black";

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(260,300);

context.lineTo(260,337);

context.lineTo(240,338);

context.lineTo(240,301);

context.lineTo(260,300);

context.fillStyle = "rgb(106,76,135)";

context.fill();

context.strokeStyle = "black";

context.font= '10pt Helvetica';

context.fillStyle ='gold';

context.fillText ('MAGICAL',95,330);

context.fillText ('THEORY',160,330);

context.stroke();

context.closePath();

///book 2

context.beginPath();

context.moveTo(65,348);

context.lineTo(320,339);

context.lineTo(320,374);

context.lineTo(65,383);

context.lineTo(65,348);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle ="rgb(194,131,31)";

context.fill();

context.font= '10pt Arial';

context.fillStyle ='black';

context.fillText ('QUIDDITCH 101',145,365);

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(65,348);

context.quadraticCurveTo(50,365,65,383);

context.moveTo(320,339);

context.quadraticCurveTo(335,358,320,374);

context.strokeStyle = "black";

context.fillStyle = "rgb(194,131,31)"

context.fill();

context.lineWidth = 1;

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(95,348);

context.lineTo(130,381);

context.moveTo(130,346);

context.lineTo(95,382);

context.moveTo(250,342);

context.lineTo(290,374);

context.moveTo(290,340);

context.lineTo(250,376);

context.lineWidth = 2;

context.strokeStyle = "black";

context.fillStyle = "rgb(59,39,7)";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.arc(113,364,5,0,2*Math.PI,false);

context.arc(270,358,5,0,2*Math.PI,false);

context.fillStyle = "rgb(59,39,7)";

context.fill();

context.closePath();

///book3

context.beginPath();

context.moveTo(15,385);

context.lineTo(340,376);

context.lineTo(340,411);

context.lineTo(15,420);

context.lineTo(15,385);

context.fillStyle = "rgb(12,1,130)";

context.strokeStyle = "black"

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(15,385);

context.quadraticCurveTo(0,402,15,420);

context.moveTo(340,376);

context.quadraticCurveTo(355,393,340,411);

context.fillStyle = "rgb(12,1,130)";

context.strokeStyle = "black"

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(40,385);

context.lineTo(48,385);

context.lineTo(48,419);

context.lineTo(40,419);

context.lineTo(40,385);

context.moveTo(315,378);

context.lineTo(307,378);

context.lineTo(307,412);

context.lineTo(315,412);

context.lineTo(315,378);

context.moveTo(285,378);

context.lineTo(277,378);

context.lineTo(277,412);

context.lineTo(285,412);

context.lineTo(285,378);

context.moveTo(70,384);

context.lineTo(78,384);

context.lineTo(78,418);

context.lineTo(70,418);

context.lineTo(70,384);

context.font= '10pt sans-serif';

context.fillStyle = 'rgb(110,106,158)';

context.fillText ('FANTASTIC',110,403);

context.fillText ('BEASTS',195,402);

context.fillStyle = "rgb(110,106,158)";

context.fill();

context.strokeStyle = "black";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(48,385);

context.lineTo(70,418);

context.moveTo(70,384);

context.lineTo(48,419);

context.moveTo(285,378);

context.lineTo(307,412);

context.moveTo(307,378);

context.lineTo(285,412);

context.lineWidth = 3;

context.fillStyle = "rgb(110,106,158)";

context.stroke();

context.fill();

context.closePath();

//mouth and beak

context.beginPath();

context.moveTo(100,180);

context.quadraticCurveTo(140,190,160,150);

context.quadraticCurveTo(180,190,220,180);

context.fillStyle = "grey";

context.strokeStyle = "grey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(150,155);

context.quadraticCurveTo(160,145,170,155);

context.moveTo(150,155);

context.lineTo(160,175);

context.lineTo(170,155)

context.fillStyle = "black";

context.strokeStyle = "black";

context.fill();

context.stroke();

context.closePath();

//scarf

context.beginPath();

context.moveTo(100,180);

context.lineTo(220,180);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle = "darkred";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(100,180);

context.quadraticCurveTo(160,205,220,180);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle = "darkred";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(110,180);

context.lineTo(135,180);

context.lineTo(135,190);

context.lineTo(110,183);

context.lineTo(110,180);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(150,180);

context.lineTo(170,180);

context.lineTo(170,191);

context.lineTo(150,192);

context.lineTo(150,180);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(185,180);

context.lineTo(210,180);

context.lineTo(210,183);

context.lineTo(185,190);

context.lineTo(185,180);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(100,180);

context.quadraticCurveTo(80,200,110,220);

context.quadraticCurveTo(120,230,110,270);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle = "darkred";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(94,190);

context.lineTo(101,195);

context.lineTo(102,205);

context.lineTo(92,196);

context.lineTo(94,190);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.moveTo(110,270);

context.lineTo(100,260);

context.lineTo(105,216);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle = "darkred";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(100,180);

context.bezierCurveTo(70,150,40,210,10,180);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle = "darkred";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(10,180);

context.lineTo(20,190);

context.lineTo(50,183);

context.lineWidth = 1;

context.strokeStyle = "black";

context.fillStyle = "darkred";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.moveTo(104,225);

context.lineTo(114,234);

context.lineTo(114,245);

context.lineTo(103,232);

context.lineTo(104,228);

context.moveTo(102,245);

context.lineTo(113,258);

context.lineTo(110,270);

context.lineTo(101,254);

context.lineTo(102,245);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

context.moveTo(22,181);

context.lineTo(30,181);

context.lineTo(25,188);

context.lineTo(20,190);

context.lineTo(22,180);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

context.moveTo(38,181);

context.lineTo(46,181);

context.lineTo(45,185);

context.lineTo(38,188);

context.lineTo(38,180);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

//EYES

context.beginPath();

context.moveTo(120,135);

context.quadraticCurveTo(140,100,160,130);

context.moveTo(200,135);

context.quadraticCurveTo(180,100,160,130);

context.fillStyle = "white";

context.strokeStyle = "black";

context.stroke();

context.fill();

context.closePath();

//eye 1

context.beginPath();

context.arc(140,140,9,0,2*Math.PI,false);

context.fillStyle = "yellow";

context.fill();

context.stroke();

context.closePath();

//eye 2

context.beginPath();

context.arc(180,140,9,0,2*Math.PI,false);

context.fillStyle = "yellow";

context.fill();

context.stroke();

context.closePath();

//eye 1

context.beginPath();

context.arc(143,140,6,0,2*Math.PI,false);

context.fillStyle = "black";

context.fill();

context.stroke();

context.closePath();

//eye 2

context.beginPath();

context.arc(183,140,6,0,2*Math.PI,false);

context.fillStyle = "black";

context.fill();

context.stroke();

context.closePath();

//eye 1

context.beginPath();

context.arc(145,139,4,0,2*Math.PI,false);

context.fillStyle = "white";

context.fill();

context.stroke();

context.closePath();

//eye 2

context.beginPath();

context.arc(185,139,4,0,2*Math.PI,false);

context.fillStyle = "white";

context.fill();

context.stroke();

context.closePath();

///head markings

context.beginPath();

context.arc(160,105,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(150,105,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(170,105,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(165,110,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(155,110,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(145,110,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(175,110,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

context.beginPath();

context.arc(160,115,.5,0,2*Math.PI,false);

context.fillStyle = "lightgrey";

context.fill();

context.stroke();

context.closePath();

///last stripe

context.moveTo(73,172);

context.lineTo(84,171);

context.lineTo(87,179);

context.lineTo(80,179);

context.lineTo(73,172);

context.strokeStyle = "black";

context.fillStyle = "gold";

context.fill();

context.stroke();

context.closePath();

//leftwing

context.beginPath();

context.moveTo(61,220);

context.quadraticCurveTo(10,200,15,250);

context.quadraticCurveTo(15,280,30,248);

context.quadraticCurveTo(10,310,40,255);

context.quadraticCurveTo(8,320,45,260);

context.quadraticCurveTo(15,325,45,270);

context.quadraticCurveTo(17,335,47,280);

context.quadraticCurveTo(18,340,60,284);

context.lineWidth = 2;

context.fillStyle = "white";

context.strokeStyle = "black";

context.stroke();

context.fill();

context.closePath();

///chest

context.beginPath();

context.moveTo(105,200);

context.quadraticCurveTo(160,300,215,200);

context.lineWidth = 1;

context.fillStyle = "white"

context.strokeStyle = "black";

context.stroke();

context.fill();

context.closePath();

context.beginPath();

context.arc(115,203,1,0,2*Math.PI,false);

context.arc(125,203,1,0,2*Math.PI,false);

context.arc(135,203,1,0,2*Math.PI,false);

context.arc(145,203,1,0,2*Math.PI,false);

context.arc(155,203,1,0,2*Math.PI,false);

context.arc(165,203,1,0,2*Math.PI,false);

context.arc(175,203,1,0,2*Math.PI,false);

context.arc(185,203,1,0,2*Math.PI,false);

context.arc(195,203,1,0,2*Math.PI,false);

context.arc(205,203,1,0,2*Math.PI,false);

context.fillStyle = "gray";

context.fill();

context.closePath();

context.beginPath();

context.arc(120,208,1,0,2*Math.PI,false);

context.arc(130,208,1,0,2*Math.PI,false);

context.arc(140,208,1,0,2*Math.PI,false);

context.arc(150,208,1,0,2*Math.PI,false);

context.arc(160,208,1,0,2*Math.PI,false);

context.arc(170,208,1,0,2*Math.PI,false);

context.arc(180,208,1,0,2*Math.PI,false);

context.arc(190,208,1,0,2*Math.PI,false);

context.arc(200,208,1,0,2*Math.PI,false);

context.fillStyle = "gray";

context.fill();

context.closePath();

context.beginPath();

context.moveTo(120,213);

context.quadraticCurveTo(130,220,140,213);

context.quadraticCurveTo(150,220,160,213);

context.quadraticCurveTo(170,220,180,213);

context.quadraticCurveTo(190,220,200,213);

context.strokeStyle = "gray";

context.stroke();

context.closePath();

context.beginPath();

context.arc(125,220,1,0,2*Math.PI,false);

context.arc(135,220,1,0,2*Math.PI,false);

context.arc(145,220,1,0,2*Math.PI,false);

context.arc(155,220,1,0,2*Math.PI,false);

context.arc(165,220,1,0,2*Math.PI,false);

context.arc(175,220,1,0,2*Math.PI,false);

context.arc(185,220,1,0,2*Math.PI,false);

context.arc(195,220,1,0,2*Math.PI,false);

context.fillStyle = "gray";

context.fill();

context.closePath();

context.beginPath();

context.arc(130,225,1,0,2*Math.PI,false);

context.arc(140,225,1,0,2*Math.PI,false);

context.arc(150,225,1,0,2*Math.PI,false);

context.arc(160,225,1,0,2*Math.PI,false);

context.arc(170,225,1,0,2*Math.PI,false);

context.arc(180,225,1,0,2*Math.PI,false);

context.arc(190,225,1,0,2*Math.PI,false);

context.fillStyle = "gray";

context.fill();

context.closePath();

context.beginPath();

context.moveTo(130,230)

context.quadraticCurveTo(140,240,150,230);

context.quadraticCurveTo(160,240,170,230);

context.quadraticCurveTo(180,240,190,230);

context.strokeStyle = "gray";

context.stroke();

context.closePath();

context.beginPath();

context.arc(145,240,1,0,2*Math.PI,false);

context.arc(155,240,1,0,2*Math.PI,false);

context.arc(165,240,1,0,2*Math.PI,false);

context.arc(175,240,1,0,2*Math.PI,false);

context.fillStyle = "gray";

context.fill();

context.closePath();

context.beginPath();

context.arc(150,245,1,0,2*Math.PI,false);

context.arc(160,245,1,0,2*Math.PI,false);

context.arc(170,245,1,0,2*Math.PI,false);

context.fillStyle = "gray";

context.fill();

context.closePath();

//beak shadow

context.beginPath();

context.moveTo(163,155);

context.quadraticCurveTo(164,155,167,155);

context.lineTo(164,162);

context.lineTo(163,155);

context.fillStyle = "white";

context.strokeStyle = "white";

context.stroke();

context.fill();

context.closePath();

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

</script>

</body>

</html>

ART 210

Tuesday, September 15, 2015

CANVAS HTML5: WORKING WITH QUADRATIC AND BEZIER CURVES

No comments:

Post a Comment