Skip to main content

Huggs 210 Kara Margraf Final Project



I've mentioned that I've lost my cat Huggs about a week ago. It may be an odd thing to do, create him after he has passed on but, I was thinking about him and I'm seeing him up in the sky as the King of the world. He was a little devil to make. I spent easily 15 hours on him. My largest challenge was layering all of the shapes and utilizing the gradients. Also, his whiskers were very time consuming. I am extremely happy with his birthmark on his nose. The code is pasted below.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">


body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}


body {
background-color: rgba(255,255,255,1);
}


#myCanvas { border: rgba(102,0,255,1) medium dashed; }


</style>


</head>

<body>

<canvas id="myCanvas" width="800" height="1000"></canvas>

<script>


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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE
 ////sky
var sky =

context.createLinearGradient(0,0,0,700);
sky.addColorStop(0,"cyan");
sky.addColorStop(1,"white");

context.rect(0,0,1000,1000);
context.stroke();
context.fillStyle = sky;
context.fillRect(0,0,1000,1000);


var greycat = context.createRadialGradient(300,300,10,300,300,200);
greycat.addColorStop(0, "rgba(200,200,200,1)");
greycat.addColorStop(1, "rgba(100,100,100,1)");



///InnerRobe
var inner =
context.createLinearGradient(50,900,200,900);
  inner.addColorStop(0,"white");
  inner.addColorStop(1,"red");

context.beginPath();
context.moveTo(425,900);
context.bezierCurveTo(590,485,90,105,120,900);
context.quadraticCurveTo(285,900,425,900);
context.closePath();
context.fillStyle = inner
context.fill();
context.stroke();

//body
context.beginPath();
context.moveTo(120,850);
//context.lineTo(160,850);
context.bezierCurveTo(145,800,255,800,260,850);
context.quadraticCurveTo(300,900,345,850);
context.bezierCurveTo(350,800,450,800,475,850);
context.bezierCurveTo(500,900,350,900,345,850);
context.lineTo(350,600);
context.quadraticCurveTo(305,550,260,600);
    context.lineTo(260,850);
context.bezierCurveTo(285,900,125,900,120,850);
context.lineTo(175,600);
context.bezierCurveTo(200,360,400,450,450,600);
context.lineTo(475,850);
//context.bezierCurveTo(500,900,300,900,345,850);
//context.lineTo(350,600);
// context.quadraticCurveTo(305,550,260,600);
// context.lineTo(260,850);
// context.bezierCurveTo(260,900,150,900,160,850);
//
//
context.closePath();
context.fillStyle = greycat
context.fill();
context.strokeStyle = "black"
context.stroke();

//belly

var belly = context.createRadialGradient(300,400,5,300,300,200);

belly.addColorStop(1,"white");
belly.addColorStop(0,"gray");

context.beginPath();
context.moveTo(120,850);
//context.lineTo(160,850);
context.bezierCurveTo(145,800,255,800,260,850);
context.quadraticCurveTo(300,900,345,850);
context.bezierCurveTo(350,800,450,800,475,850);
context.bezierCurveTo(500,900,350,900,345,850);
context.lineTo(350,600);
context.quadraticCurveTo(305,550,260,600);
    context.lineTo(260,850);
context.bezierCurveTo(285,900,125,900,120,850);

context.closePath();

context.fillStyle = belly
context.fill();



////robe
var crown =
context.createRadialGradient(320,285,10,275,300,100);
crown.addColorStop(0,"white");
crown.addColorStop(.55,"beige");
crown.addColorStop(1,"gold");

context.beginPath();
context.moveTo(50,900); context.bezierCurveTo(100,105,590,485,500,900);
context.quadraticCurveTo(475,950,425,900);
context.bezierCurveTo(590,485,90,105,120,900);
context.quadraticCurveTo(75,950,50,900);
context.closePath();
context.fillStyle = crown
context.fill();
context.stroke();


// LEFT EAR
    context.beginPath();

context.moveTo(200,210);
context.quadraticCurveTo(10,30,120,290);
 //  context.bezierCurveTo(150,120,410,170,425,270);
// context.quadraticCurveTo(490,-35,320,180);
 
context.closePath();

    context.stroke();
context.fillStyle = greycat;
context.fill();


// RIGHT EAR
 context.beginPath();

context.moveTo(320,180);
context.quadraticCurveTo(490,-35,425,270);
//   context.bezierCurveTo(150,120,410,170,425,270);
// context.quadraticCurveTo(490,-35,320,180);
 
context.closePath();

    context.stroke();
context.fillStyle = greycat;
context.fill();


/////mouth

context.beginPath;
context.moveTo(250,465)
context.bezierCurveTo(235,485,300,510,300,465);
context.closePath();
context.stroke();
context.fillStyle = greycat;
context.fill();
/// FACE


context.beginPath();

context.moveTo(425,270);
// context.quadraticCurveTo(490,-35,425,270);
   context.bezierCurveTo(460,170,100,90,120,290);
// context.quadraticCurveTo(490,-35,320,180);


context.quadraticCurveTo(100,405,230,430)
context.bezierCurveTo(130,405,225,500,275,470);
context.bezierCurveTo(350,500,400,400,350,415);
context.quadraticCurveTo(450,405,425,270);
 
context.closePath();

    context.stroke();
context.fillStyle = greycat;
context.fill();

///// birthmark
var birthmark2 =
context.createRadialGradient(290,410,2,260,400,85);

birthmark2.addColorStop(0,"gray");

birthmark2.addColorStop(1,"white");


context.beginPath();
context.moveTo(370,430);
context.quadraticCurveTo(325,425,270,435);
context.quadraticCurveTo(285,375,280,410);
context.quadraticCurveTo(345,380,365,413);
context.quadraticCurveTo(400,400,375,415);

context.fillStyle = birthmark2
context.fill();
context.closePath();


 
/// bm3


//
// context.beginPath();
// context.moveTo(270,425);
// context.quadraticCurveTo(245,370,185,430);
// context.closePath();
// context.strokeStyle = "black";
// context.stroke();
// context.fillStyle = "black";
// context.fill();
//



//context.quadraticCurveTo(295,425,185,435);
   // context.quadraticCurveTo(185,375,190,420);
 //context.quadraticCurveTo(245,380,215,413);
// context.quadraticCurveTo(400,400,225,415);
context.closePath();

context.fillStyle = birthmark2
context.fill();
 
///// nose bridge
var birthmark =
context.createRadialGradient(215,370,2,240,400,85);

birthmark.addColorStop(0,"gray");
birthmark.addColorStop(.05,"gray");
birthmark.addColorStop(1,"white");




context.beginPath();
context.moveTo(250,430);
context.quadraticCurveTo(275,370,260,300);
context.quadraticCurveTo(280,200,315,300);
context.quadraticCurveTo(280,370,300,430);

context.closePath();
context.strokeStyle = birthmark;
context.stroke();


context.closePath();
context.fillStyle = birthmark;
context.fill();

   
///// nose

context.beginPath();
context.moveTo(250,430);
context.quadraticCurveTo(275,480,300,430);
context.quadraticCurveTo(275,400,250,430);
 
context.closePath();
context.fillStyle = "black";
context.fill();

///// Left Eye

var lefteye = context.createRadialGradient(175,300,5,175,300,100);
lefteye.addColorStop(0,"black");
lefteye.addColorStop(0.1,"green");
lefteye.addColorStop(0.2,"yellow");
lefteye.addColorStop(0.3,"white");

context.beginPath();
context.moveTo(150,290);
context.quadraticCurveTo(150,350,225,325);
context.quadraticCurveTo(225,270,150,290);

context.strokeStyle = greycat;
context.stroke();

context.closePath();
context.fillStyle = lefteye;
context.fill();


///// Right Eye

var righteye = context.createRadialGradient(360,300,5,360,300,100);
righteye.addColorStop(0,"black");
righteye.addColorStop(0.1,"green");
righteye.addColorStop(0.2,"yellow");
righteye.addColorStop(0.3,"white");

context.beginPath();
context.moveTo(335,325);
context.quadraticCurveTo(400,345,400,290);
context.quadraticCurveTo(325,265,335,325);
context.stroke();

context.closePath();
context.fillStyle = righteye;
context.fill();

////Whiskers
context.beginPath();
context.moveTo(320,440);
context.quadraticCurveTo(400,390,475,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();

/////
context.beginPath();
context.moveTo(300,440);
context.quadraticCurveTo(400,390,455,450);

context.strokeStyle = "black"
context.stroke();
context.closePath();

/////
context.beginPath();
context.moveTo(330,460);
context.quadraticCurveTo(400,390,495,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();


////
context.beginPath();
context.moveTo(305,460);
context.quadraticCurveTo(340,430,475,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();

///
context.beginPath();
context.moveTo(250,440);
context.quadraticCurveTo(210,400,125,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();


///
context.beginPath();
context.moveTo(225,440);
context.quadraticCurveTo(180,390,115,430);

context.strokeStyle = "black"
context.stroke();
context.closePath();

////
context.beginPath();
context.moveTo(245,440);
context.quadraticCurveTo(190,410,115,450);

context.strokeStyle = "black"
context.stroke();
context.closePath();

////
context.beginPath();
context.moveTo(245,470);
context.quadraticCurveTo(190,410,130,440);

context.strokeStyle = "black"
context.stroke();
context.closePath();

////crownTop

context.beginPath();
context.moveTo(110,270);
context.quadraticCurveTo(20,100,165,100);
//context.quadraticCurveTo(160,100,185,100);
context.quadraticCurveTo(250,20,310,165);
context.closePath();
context.stroke();
context.closePath();
context.fillStyle = inner
context.fill();

///Crownband
var crown =
context.createRadialGradient(320,285,10,275,300,100);
crown.addColorStop(0,"white");
crown.addColorStop(.55,"beige");
crown.addColorStop(1,"gold");

context.beginPath();
context.moveTo(200,245);
context.lineTo(150,100);
context.lineTo(180,88);
context.lineTo(250,225);
context.lineTo(200,245);

context.fillStyle = crown
context.fill();
context.strokeStyle = crown
context.stroke();

////CrownRim


context.beginPath();

context.moveTo(130,275)
context.quadraticCurveTo(275,260,325,160);
context.bezierCurveTo(300,100,300,225,100,240);
//context.quadraticCurveTo(200,250,110,245);
context.bezierCurveTo(80,250,80,275,130,275);

context.quadraticCurveTo(130,275,100,255);
// context.quadraticCurveTo(100,100,140,100);
context.stroke();


context.closePath();
context.fillStyle = crown
context.fill();
////cloud

context.beginPath();
context.moveTo(45,870);
context.bezierCurveTo(100,850,200,800,290,870);
context.bezierCurveTo(300,820,450,870,450,900);
context.bezierCurveTo(480,870,550,830,525,975);
context.bezierCurveTo(500,980,470,990,450,980);
context.bezierCurveTo(425,1000,300,975,275,950);

context.bezierCurveTo(245,1000,100,999,50,980);
context.bezierCurveTo(35,980,35,860,45,870);
context.fillStyle = "white"
context.fill();
context.strokeStyle ="rgba(0,0,0,1.1)"
context.stroke();


////tail
context.beginPath();
context.moveTo(400,650);
context.bezierCurveTo(430,400,600,400,575,490);
context.lineWidth = 40
context.lineCap = 'round'
context.strokeStyle = greycat
context.stroke();
context.closePath();





//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('Kara Margraf Fall 2017', 20, 950);
context.closePath();

</script>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Business Cards/Logo Designs

Here are five business cards with different individual logos. They represent the five positive attributes of being a team player, caring, adaptable, motivated,  devoted/trustworthy.
Post a Comment
Read more

Supergraphics of Tampa Bay

Post-Modernism was an era beginning in the 1970s that allowed artists to find their passion and pursue it. The movement itself fi represented in many different mediums and is recognizable as the highlighted graphic design used today.  One design ideology of this movement was that style was content. Adhering to this ideology, developed the supergraphic which is an extremely sized pictograph that integrates itself to the environment. Immediately recognizable by bold geometric shapes and colors supergraphics have become social media staples and focus points of many places.  Tampa bays is home to many innovative and trendy dining options. As an up and coming city, it prides itself on the number of photo spots the city has to offer. Many of these places utilize supergraphics to get their image posted on social media to build buzz. For example, the recently renovated Channel side is now home to Sparkman’s Wharf. Here, renovated shipping containers with supergraphics affix...
Post a Comment
Read more

Inspired Etches

Symbols #2                  For a website titled Inspired “Etches,” it is no wonder that there is a post here talking about cave drawings, hieroglyphics, and other carved symbols and shapes. When we follow through their evolution, they have the greatest impact on not only me, but everyone who associates symbols with loved ones, pictures with loved ones, and anyone who has ever seen a movie. For me, this subject is very raw and that is great because it means that it is powerful and may help me pay closer than normal attention to detail on this post.                   This year, the last Saturday in February, my Mommom passed away from a stroke. When the initial shock died down, we began to realize that she was now with her late husband, my Poppop, and to handle her affairs here on earth were 6 children she ra...
Post a Comment
Read more