Part 2: Draw Object and identify coordinates by HTML5

In the previous part, we completely created a files and renamed following the requirement as well as learned about powerful features of Javascript Programming Language

In this tutorial, we will learn how to draw an object and identify coordinates. It includes 5 details steps. Following and making step by steps, it is easy to complete.

Step 1: How to execute command in javascript after loading the web page

In the< script > tag, type the code as below:

< script >

Window.onload = function()  {

                console.log("This is your first step");

Step 2:

Type this command:

< canvas id=”gameCanvas” width=”700” hight =”500” >

Step 3: Getting html canvas tab to use in the Javascript

In the < script > tag, we add source code as below:

Var canvas;

VarcanvasContext;

The purpose of adding code is creating 2 Variable including: Var canvas andVarcanvasContext.

In addition, we add:

canvas = document.getElementById('gameCanvas');

                canvasContext=canvas.getContext(‘2d’);

                CanvasContext.fillStyle= ‘red’;

                canvasContext.fillRect(0,0,canvas.width,canvas.height);

After that you should press “save” button and refresh web page to update the code.

If you completed 3 steps following our guide, you will have the code as above box.

Step 4: implement with coordinates of Game 2D in canvas

Using canvas to create a rectangle

Fillrect function is used to define coordinates and size of rectangle. Detail content as below image:

 Refresh and show the result after saving code

As the same, You can create more rectangle by a different command:

CanvasContext.fillStyle = “white”;

CanvasContext.fillRect(200,200,50,25)

Step 5: Shapes are stacked in Javascript.

In javascript, the last shape was created be stacked on previous shapes. In this case, the white shape will be stacked a blue shape and a red shape.

To move location of object, we will change their coordinates.


After finish this part, you could find the other lesson as link below: 

http://gamemakerlab.com/game-html5/Part-3-Creating-movement-and-time-by-HTML5