Modifying the HTML and CSS

Before we continue and build our canvas API example we want to align the canvas element to sit on top of our HTML frame.

After creating the canvas element we will need to position our canvas in the right area of our screen to do that we will use some CSS tricks to position our canvas exactly where we want it to be placed. Although we are not actively learning CSS in this title the basics of CSS are easy to follow.

We started our canvas tutorial using a pre-built template HTML file. The first thing we will want to do is figure out where to place our HTML5 canvas information followed by filling the canvas background color so we can find it using the canvas API.

After creating the canvas element we will need to position our canvas in the right area of our screen. To possion elements we will use CSS. We are assuming you have a background in working with CSS if you do not you may follow us by steps - don't worry it will not effect your learning of Canvas. With that said we do encourage you to learn the basics of CSS (you don't need to be a CSS pro). Although we are not actively learning CSS in this title the basics of CSS are easy to follow.

Canvas Tutorial

In this video we will solve all the video positioning issues. To make this happen we will be adding some CSS. We will add a style for our canvas. Before we do that we will change the containing layer to be a relative layer enabling us to change the definition of our internal canvas element to be absolute making it really easy to snap it into position. All we have left is to move our element in absolute coordinates using top and left CSS properties.