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

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

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

De Stijl Lovin’ it?: De Stijl influence on McDonald’s Interior Design

Known as “ The Style ” in Dutch, De Stijl was a new art form which simplified elements of the world down to pristine geometric shapes. Running parallel to other European art movements through this time, such as Dada, De Stijl viewed abstraction in a cleaner way.  De Stijl utilized abstraction neatly and simplified the shapes down to their simplest geometric form. Overall, this movement was a contributing factor to Bauhaus and many other architecture based art movements.   The meaning behind these movements was to create an “utopian idea of harmony and order.” Reducing elements down to their simplest forms reduces critiques which can appeal to a larger demographic regarding interior designs for stores and frequented fast food restaurants. A key element revolving around De Stijl was that form met function. This is a key component for interior design and even more so, mass produced interior design. As someone who has stared at the wall and the floor...
Post a Comment
Read more