#2 Progress 9/20




Progress 9/20


<!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

//sky
context.beginPath();
context.rect(0,0,800,200);

context.fillStyle="#F0E2FC";
context.fill();

//mountains background
//mtn line
context.beginPath();
context.moveTo(0,15);
context.lineTo(75,100);

context.lineTo(130,40);
context.lineTo(200,125);

context.lineTo(270,75);
context.lineTo(325,110);

context.lineTo(400,25);
context.lineTo(475,125);

context.lineTo(540,75);
context.lineTo(615,125);

context.lineTo(710,15);
context.lineTo(800,125);

context.lineTo(800,450);
context.lineTo(0,450);
context.lineTo(0,75);
context.closePath();

context.fillStyle="#13263a";
context.fill();

//mountains front

//1
context.beginPath();
context.moveTo(0,450);
context.lineTo(0,225)
context.lineTo(60,40);
context.lineTo(250,450);
context.closePath();

context.lineWidth=2;
context.lineJoin="miter";

// Create gradient
var grd = context.createLinearGradient(50, 200, 20, 100);
grd.addColorStop(0,"#D9EAEF");
grd.addColorStop(1,"#ECF8FC");
// Fill with gradient
context.fillStyle = grd;
context.fill();


//2
context.beginPath();
context.moveTo(100,450);
context.lineTo(100,200);
context.lineTo(225,75);
context.lineTo(400,450);
context.closePath();

context.lineWidth=2;
context.lineJoin="miter";

// Create gradient
var grd = context.createLinearGradient(225, 200, 50, 100);
grd.addColorStop(0,"#D9EAEF");
grd.addColorStop(1,"#ECF8FC");
// Fill with gradient
context.fillStyle = grd;
context.fill();


//1
context.beginPath();
context.moveTo(800,450);
context.lineTo(800,225)
context.lineTo(740,40);
context.lineTo(550,450);
context.closePath();

context.lineWidth=2;
context.lineJoin="miter";

// Create gradient
var grd = context.createLinearGradient(50, 200, 20, 100);
grd.addColorStop(0,"#D9EAEF");
grd.addColorStop(1,"#ECF8FC");
// Fill with gradient
context.fillStyle = grd;
context.fill();

//2
context.beginPath();
context.moveTo(700,450);
context.lineTo(700,200);
context.lineTo(575,75);
context.lineTo(400,450);
context.closePath();

context.lineWidth=2;
context.lineJoin="miter";

// Create gradient
var grd = context.createLinearGradient(50, 200, 20, 100);
grd.addColorStop(0,"#D9EAEF");
grd.addColorStop(1,"#ECF8FC");
// Fill with gradient
context.fillStyle = grd;
context.fill();


//ice
 context.beginPath();
// Create gradient
var grd = context.createLinearGradient(300, 600, 300, 350);
grd.addColorStop(0,"#e6ffff");
grd.addColorStop(1,"#004CB3");

// Fill with gradient
context.fillStyle = grd;
context.fillRect(0, 450, 800, 150)

//right wing
var centerX = 60;
    var centerY = 30;
    var radius = 25;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
      context.rotate(Math.PI / -5);

      // scale context horizontally
      context.scale(1, 3);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

//left wing
var centerX = -60;
    var centerY = 30;
    var radius = 25;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);
// rotate 45 degrees clockwise
      context.rotate(Math.PI / 5);

      // scale context horizontally
      context.scale(1, 3);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();


//body
var centerX = 0;
    var centerY = 25;
    var radius = 50;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 3);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

//body inside
var centerX = 0;
    var centerY = 25;
    var radius = 40;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 3);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();


//foot left
var centerX = -35;
    var centerY = 210;
    var radius = 20;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

//foot right
var centerX = 35;
    var centerY = 210;
    var radius = 20;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();



//head
var centerX = 0;
    var centerY = -40;
    var radius = 40;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 2);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

//head inside
var centerX = 0;
    var centerY = -40;
    var radius = 33;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 2);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'white';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'white';
      context.stroke();

//eye right
var centerX = 27;
    var centerY = -45;
    var radius = 15;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(1, 2);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

//eye left
var centerX = -27;
    var centerY = -45;
    var radius = 15;

  // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(1, 2);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();


//nose top
context.beginPath();
context.moveTo(390,260);
context.lineTo(413,260);
context.lineTo(402,245);
context.closePath();

context.lineWidth=2;
context.lineJoin="miter";
context.strokeStyle="orange";
context.stroke();

context.fillStyle="orange";
context.fill();


//nose
context.beginPath();
context.moveTo(390,260);
context.lineTo(413,260);
context.lineTo(402,275);
context.closePath();

context.lineWidth=2;
context.lineJoin="miter";
context.strokeStyle="orange";
context.stroke();

context.fillStyle="orange";
context.fill();


//nose line
context.beginPath();
context.moveTo(390,260);
context.lineTo(413,260);
context.closePath();
context.lineWidth=2;

context.strokeStyle="black";
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('Kaylin Schemmel', 20, 550);
context.closePath();

</script>



</body>
</html>

Comments

Post a Comment

Popular posts from this blog

#4 Calligram

Image
This quote is one from JFK when he was speaking in 1962 at the America's Cup Dinner Given by the Australian Ambassador. When he is speaking to the ambassador he says this quote and follows it with how America and Australia are bound together by the "friend" that is the ocean. I thought this fit well with the sailboat because it's talking about how we are connected to the sea in so many ways, and I thought a sailboat was a good way to represent that connection.
Read more

#3

Image
Drawing code <!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 //sky context.beginPath(); context.rect(0,0,800,200); context.fillStyle="#F0E2FC"; context.fill(); /
Read more