Untitled.png

After you’ve played around with HTML (Hypertext Markup Language) for a little while and you think your ready to move on to something a bit more fun then the HTML5 canvas is usually pretty nice to play around with so for this project your going to play around with some JS (JavaScript) to draw a looping box animation (Yay!).

Step 1 : Make Your Base.
This for me is always the best place to start because every HTML file needs to be formatted into the Website Structure so the users browser knows what to do, type or copy the below into your chosen Text Editor.

<!DOCTYPE html>
< html>
< head>
< /head>
< body>
< /body>
< /html>

Step 2 : Add Your Tags.
After creating your base structure you should continue by adding a title to your project so the viewer of the webpage knows what they are looking at, insert the following between your projects <head> (Open) and </head> (Closed) tags.

<title>Drawing To Canvas</title>

After your page has a title you’ll need to add a canvas to your project and make sure its not too big or small to do this simply add the below code to the body of you webpage.

<canvas id=”myCanvas” width=”150″ height=”25″>
</canvas>

As you can probably tell the width=”150″ and height=”25″ is going to let the browser know what size to draw your canvas at (Duh!) and the id=”myCanvas” is used to get the drawing surface of the canvas.

Step 3 : Time To Draw
When you have your canvas set up you’ll need a way to draw to it, the only way to do that with a Text Editor is by adding these two lines just below your canvas tag in the body of you page.


*sorry the blog wont let me put a script tag.

This tag should really explain itself, the first line tells the browser to execute the following as… yep you guessed it JavaScript, now to actually draw the first thing you should to do is store the canvas as a variable for easier access to it later, add the following between the <script> tags.

var canvas = document.GetElementById(“myCanvas”);
var ctx = canvas.getContext(“2d”);
var x = 0;

The first line above gets and stores the canvas on your webpage in a variable named “canvas” while the second line gets and stores the context(Used To Draw) in the variable “ctx” and “x” is going to be used to animate the position of your box, now for the fun insert the next piece of code just below the above.

run = function() {
ctx.clearRect(0, 0, 150, 25);

ctx.beginPath();
ctx.rect(x, 0, 25, 25);
ctx.fillStyle = “rgba(255, 0, 0, 1)”;
ctx.fill();
ctx.closePath();

x++;
if (x > 150) { x = -25; }

window.requestAnimationFrame(run);
};

run();

This code creates a function called “run” and in that function the first thing it does is clears the canvas with the line “ctx.clearRect(0,0,150,25);” the numbers inside the “clearRect” is as follows:

  1. x or horizontal position.
  2. y or vertical position.
  3. width.
  4. height.

the next line is used to say that it should draw the next code it finds as a single shape then continues by drawing a red rectangle at the position x at a width/height of 25 then closes the shape, followed by “x++” that increases the value of x by 1 every frame then checks if x is larger than the set width we gave the canvas and if so it will set x to -25 then finally it asks the window to keep repeating this function as an animation then finally closes the function and runs it.

Step 4 : Checking it out
Finally save your project as “index.html” and open it in a modern browser Google Chrome is the best for this seen as the canvas element is a HTML5 tag and chrome has the best support for this.

Advertisements