Senior Project!

After switching my senior project for 3 times, I have decided to stick with film making. My friend Mario is our actor. If you want to check some of our stuff out, click here.

Project 4

Canvas haa neat property called save(); and restore(); which allows you to be able to store certain codes and be able to call them. Learning this technique can save you time.

To view and example click here.

The source code:

function draw(){
 var ctx = document.getElementById('canvas').getContext('2d');

   ctx.fillStyle = '#0000FF'
   ctx.fillRect(0, 0, 15, 15);
   ctx.save();                 

   ctx.fillStyle = '#FFA500'
   ctx.fillRect(5,5,120,120);
   ctx.save();

   ctx.fillStyle = '#C34A2C'
   ctx.globalAlpha = 1.5;
   ctx.fillRect(3,3,90,90);

   ctx.restore();
   ctx.fillRect(4,4,60,60);

   ctx.restore();
   ctx.fillRect(6,6,30,30);
}

Project 3

This week we started working around with colors.
I had a hard time understanding how it works.
I created a basic color picture. Seen it here.

The source code:

function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = '#736F6E';
ctx.fillRect(0, 0, 75, 75);
ctx.fillStyle = '#617C58';
ctx.fillRect(75, 0, 75, 75);
ctx.fillStyle = '#D4A017';
ctx.fillRect(0, 75, 75, 75);
ctx.fillStyle = '#6698FF';
ctx.fillRect(75, 75, 75, 75);
ctx.fillStyle = '#C12283';

for (var i = 0; i < 7; i++){
 ctx.beginPath();
 ctx.arc(75, 75, 10+10 * i, 0, Math.PI * 2, true);
 ctx.fill();
 }
} 

The math equation creates the circle thats in the middle of the canvas.
Changing the number in i < 7 will either increase or decrease the size of the circle.

Project 2

Week two. I went of course this week, and started looking at other tutorials. I came across a text one and decided to create a reflection of it. Here it the code:

window.onload = function(){
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");

context.translate(canvas.width / 2, canvas.height / 2);
context.font = "30pt Calibri";
context.scale(-1, 1);
context.textAlign = "center";
context.fillStyle = "#A52A2A";
context.shadowColor = "#800000";
context.shadowBlur = 20;
context.fillText("RACECAR", 0, 0);
}

And the outcome is available here.

Explanation:
To put the text in the canvas we need the:

context.fillText

to have a shadow we put:

context.shadowColor

and for the mirror:

context.scale(-1, 1)

Project 1

This week we started working on Canvas. To include a canvas in the website we start by putting the canvas tags.

function drawShape(){
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
  
}
}

This creates the basic set up for a canvas. In order to be able to draw you need to add

ctx.fillStyle

ctx.fillRect

ctx.beginPath

ctx.arc(

ctx.lineTo

ctx.moveTo

ctx.lineTo

ctx.stroke

To view a example click here.