Ir al contenido principal

Assignment #2. Canvas Final Project



Dear blog, this is my canvas final project. I had stressful moments during this assignment. At the beginning was hard to understand how to use these codes in order to create great images. Finally, after three days of trying different codes, I managed to create this car on a road with mountains. I know it does not look complex, but I felt really proud of myself when I finished this one.




My code:

<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS FINAL 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.00);
}


#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.rect(0,0,800,600);
// add linear gradient
      var grd = context.createLinearGradient(0,0, 800, 600);
      // light blue
      grd.addColorStop(0, '#0ECFDF');
      // dark blue
      grd.addColorStop(1, '#085398');
      context.fillStyle = grd;
      context.fill();

 
      //shape
      context.beginPath();
      context.rect(10, 480, 780, 50);
      context.fillStyle = 'gray';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();

context.rect(10,480,780,50);
// add linear gradient
      var grd = context.createLinearGradient(0,0, 800, 600);
      // light gray
      grd.addColorStop(0, '#BDB8B8');
      // dark gray
      grd.addColorStop(1, '#494545');
      context.fillStyle = grd;
      context.fill();



    //shape
      context.beginPath();
      context.rect(500, 350, 200, 70);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();


      context.beginPath();
      context.rect(550, 250, 100, 100);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();


      var centerX = canvas.width / 2;
      var centerY = canvas.height /5;
      var radius = 30;

      context.beginPath();
      context.arc(550, 450, radius, 0, 4 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'blck';
      context.stroke();

      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 30;

      context.beginPath();
      context.arc(650, 450, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();


      context.beginPath();
      context.rect(500, 350, 30, 30);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 7;
      context.strokeStyle = 'black';
      context.stroke();

context.beginPath();
      context.rect(605, 265, 30, 70);
      context.fillStyle = 'blue';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();

 context.beginPath();
      context.rect(560, 265, 30, 70);
      context.fillStyle = ' blue';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = 'black';
      context.stroke();


      context.beginPath();
      context.moveTo(0, 250);
      context.quadraticCurveTo(288, 0, 450, 200);
      context.lineWidth = 10;

      // line color
 context.fillStyle ='green'
 context.fill()
      context.strokeStyle = 'black';
     context.stroke();

 context.beginPath();
      context.moveTo(390, 250);
      context.quadraticCurveTo(550, 0, 800, 200);
      context.lineWidth = 10;

      // line color
 context.fillStyle ='green'
 context.fill()
      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('ART 210 - Victoria Perez', 20, 550);
      context.closePath();

</script>


</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

Assignment #9. Presentation Cards

Dear blog, this project was other that I really enjoyed. It also took me many hours of hard work.Thinking and deciding the colors, fonts and shapes was pretty awesome. I have to admit that while I was doing this project I discovered a passion inside of me. Although my major is Advertising and Public Relations, I did not know that I really liked to design logos. I put myself into this project, it really reflects who I am and the creativity I have. Before I had all the cards full of soft colors. My professor advised that they will look better if I make them darker. I took that recommendation and used the same colors in their darkest tones . I love pastel and soft colors they are really pretty; however, I did not know that they should not be used as much as I did in my cards and logos. 
Publicar un comentario
Leer más

Assignment #3. Calligram Project

Dear blog, usually, I relate butterflies to liberty and freedom. My poem represents how butterflies fly to whatever place they want, with their beautiful colors. I let my mind fly whit no sense of direction, just soaring through the sky. Like a person driving on the highway with the wind blowing their hair back, not having a care in the world. Butterflies give me that priceless feeling.  One side depicts freedom and the other butterflies, as the butterfly I created is divided into two pieces. I loved my concept more than my creation. 
Publicar un comentario
Leer más

Assignment #7. Somewhere, Photoshop

Dear blog, this project is called somewhere. I had fun while doing this one, I wanted to create something authentic. I placed myself in a vintage cafe, also I add some pills to the picture simulating that I took them and passed out. I wanted to create something dramatic. My weakness in this piece is my hair that I could not cut perfectly from the original image making it look unrealistic. Although it might look simple, I put a lot effort while creating this project, 
Publicar un comentario
Leer más