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 #10. Animation Video

Dear blog, we had to create an animation video in Photoshop. For me was really hard because I had zero knowledge about the creation of videos in Photoshop. After several attempts, I did learn how to put all the images together. This one was really special because I made it about my friends here at UT. Then the audio was created on GarageBand, I mixed loops and my voice. I was ashamed of doing that but it ended up pretty awesome. Animation: https://www.youtube.com/watch?v=8G7Ht61_flc and with the audio below here:
Publicar un comentario
Leer más

Assignment #4. Gradient Mesh

Dear blog, this lamp has a special value for me. It was the first thing I bought when I arrived at The University of Tampa. I remember trying to find a place in my dorm room where it could perfectly fit. I really like the result of the project, as I consider this one to be one of the hardest. I spent hours on this one. The gradient mesh tool was hard to use at the beginning. However, after several youtube tutorials, I finally got the result I wanted. I have the original and the one created by me in Adobe Illustrator.
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