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

Autoscopy.... in all different qualities!

For this project we had to show something that makes us insecure about our lives. For this I chose to expose my wish that I wish on days I was feeling so low about how I look or my weight, I wish I could just unzip my outer shell and step into the person I want to become. There's also different qualities! Enjoy! 0 quality  25 Quality  50 Quality 75 Quality 100 Quality
Post a Comment
Read more