9/25 Assignment #1

Kevin Wagenheim

Art210

Assignment #1

9/25



<!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="600"></canvas>

<script>


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

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

context.beginPath();
 context.moveTo(100,100);
 context.lineTo(200,100);
 context.lineTo(150,200);
 context.closePath();
 context.stroke();
 context.fillStyle = "rgba(200,0,0,0.5)";
 context.fill();

context.beginPath();
 context.moveTo(400,300);
 context.lineTo(400,500);
 context.lineTo(200,400);
 context.closePath();
 context.stroke();
 context.fillStyle = "blue";
 context.fill();

context.beginPath();
 context.rect(400,100,100,100);
 context.lineWidth = 7;
 context.fillStyle = "purple";
 context.fill();
 context.strokeStyle = "pink";
 context.stroke();
 context.closePath();

context.beginPath();
 context.moveTo(700,300);
 context.lineTo(600,500);
 context.lineTo(500,400);
 context.closePath();
 context.stroke();
 context.fillStyle = "black";
 context.fill();

context.beginPath();
 context.rect(700,50,100,50);
 context.lineWidth = 3;
 context.fillStyle = "yellow";
 context.fill();
 context.strokeStyle = "green";
 context.stroke();
 context.closePath();

context.beginPath();
    context.moveTo(600, 50);
    context.quadraticCurveTo(288, 0, 388, 150);
    context.lineWidth = 10;
 context.strokeStyle = "orange";
 context.stroke();

context.beginPath();
 context.moveTo(188, 130);
    context.bezierCurveTo(140, 10, 388, 10, 388, 170);
 context.lineWidth = 3;
 context.strokeStyle = "green";
 context.stroke();

context.beginPath();
 context.arc(150, 300, 50, 0, 2 * Math.PI, false);
    context.fillStyle = "orange";
    context.fill();
    context.lineWidth = 5;
    context.strokeStyle = "red";
    context.stroke();

context.beginPath();
 context.moveTo(50,500);
 context.lineTo(50,300);
 context.lineTo(150,400);
 context.closePath();
 context.fillStyle = "teal"
 context.fill();
 context.stroke();

context.beginPath();
 context.rect(500,200,100,150);
 context.fillStyle = "Purple";
 context.fill();
 context.strokeStyle = "teal";
 context.stroke();

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


// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('Kevin Wagenheim - CANVAS PROJECT', 20, 550);
context.closePath();

</script>


</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Portrait Poster 10/31

Image
Kevin Wagenheim Art 210 10/31 Portrait Poster For my portrait, I decided to go with the low poly self portrait style. I thought that my portrait came out cool, so I tried to make the background low poly as well using a radial gradient. For my first try at it, I thought it came out pretty well. For a final poster, I made a poster ad telling students to study digital arts to make something like this! Portrait Picture: Process Shots: Finished and Reflected: Added some hair: Background Process:
Read more

Art History 11/14

Image
Kevin Wagenheim 11/14 Art History For my Art Project, I inserted my head onto a portrait of Captain Oliver Hazard Perry by Edward Mooney. When I first began this project, I quickly learned that cutting out my frizzy hair is not easy one bit. So after many trials and errors of pictures and different portraits to use, I finally came up with this. I began with cutting out my face from my original picture. Then, I added a angled brush stroke filter to my face, and adjusted the brightness. Then using the clone stamp tool, I was able to continue the background and take out the original head. I then cut my face up a little better to blend in with the picture. Original Pictures:
Read more