Alright, now that we've seen this in action, let's go ahead and use it ourselves.

Now, it's worth pointing out, that any time the user would resize the screen, the canvas will remain this size.

There are no useless lives, let's accept each other

Or run over the canvas with a car and print a tire trace on it...

The game client is written in JavaScript and uses

For example In the case of that white canvas I said,

We're going to have to create a new element, using document.createElement, both for the div and for the canvas, then we'd like to set their ids.

DOM as a DOM element.

Let's try to make a cat walk on the canvas...

Which as you can see placed the top left corner of the image, 192 by 192 pixels up from the top left corner of the canvas, which has been conveniently placed at location zero, zero on the page.

Canvas is a new HTML5 element which exposes APls allowing you to draw graphs, images, and text to portions of the page.

Now, without further ado, let's create our first canvas.

How to write a 2D tile based rendering engine.

For the purposes of GRlTS, we actually use the window.innerwidth and window innerheight. sizes for our canvas, allowing it to occupy the fullscreen for the user.

For the div, we'll set it to gameContent and for the canvas we'll set it to gameCanvas.

The next two are width and height, which represent the size of this chart in the atlas itself.

You actually get each of the frames drawn over each other, creating this sort of halo effect. There's a reason for this.

The basic HTML for grabbing the canvas object is pretty straightforward. We've seen this before.

In this simple example, we set the width and height to 1200 by 720 respectively.

If it doesn't exist we use the document.createElement method specified at p tag.

It's a nifty little space where all your questions can be answered. For our next step, why don't you go ahead and fill in the onLoad function that we defined earlier.

The DOM allows us to access and modify our HTML document dynamically, using Javascript.

The interesting thing that we haven't yet covered is grabbing the context of the canvas. Think of the canvas object that we fetched from the

The bulk of canvas interaction that GRlTS uses, is through rendering images to the canvas.

It assumes that it's going to be given a spritename, which represents the name of the loose asset file as well as the position X and position Y on where it wants to render it on the canvas.

So, the first thing we do, is grab the body dom object using document.getElementByld, with an id of body, and we create a div object, as well as a canvas object, and set their id's appropriately to div.id gameContent and canvas.id gameCanvas and finally, we append the div object to the body and the canvas object to the div.

What I'd like you to do is grab the canvas element that we've already specified in our HTML page and set its width and height attributes appropriately.

We were able to look at the documentation and see that context.drawlmage allowed us to pass in the image object as well as the position on the canvas we'd like to draw, 192 by 192.

If you're not already familiar with JavaScript or modern browsers, then we have an optional JavaScript crash course for you to take.

It seems a bit strange to say One causes a Serendipity but to increase the possibility that it occurs let's start by making a Springboard for it.

By combining these things, we actually get a nice little setup that tells us the number of pixels x and y offset from the origin of the canvas to draw this tile.

Since we're just given a spitename, we need to map where that spritename exists inside of the atlases that we've loaded.

A canvas only has two attributes specific to it, width and height, which specify what size this drawing surface is on your page.

This is important because if you recall the coordinate system of the canvas will place an image according to its top left corner.

If we open this up into our browser, we can see that we have indeed created a div element and inside that is our new canvas element and both with a proper id.