Canvas

Created on Feb. 7, 2013, 10:11 p.m. by Hevok & updated by Hevok on May 2, 2013, 5:08 p.m.

The backbone of all old-school graphic engines is a 2D till-based render engine. In HTML5 it starts with a single DOM element, called the Canvas object.

Canvas is a new HTML5 element which exposes API allowing to draw graphs images and text to portions of the page. A canvas has only two attributes specific to it, width and height which specify what size the drawing surface is on the page.

Since Canvas is a effectively a large large memory block of pixels data or bitmap, it closely resembles the memory layout that game developers are using to generate 2D games.

The width and height of the Canvas element can be set like this:

<html>
   <body>
   <canvas id="dj_canvas"></canvas>
   </body>

   <script>
       var canvas = null;

       setup = function() {
           var body = document.getElementById("body");  // Grab the body element using document.getElementById, assuming the body elements has an id 'body'.
           canvas = document.createElement("canvas"); // Create a canvas element
           context = canvas.getContext('2d');
           canvas.id = "dj_canvas";
           // then set the width and height properties to 1200 and  720, respectively.
           canvas.width = 1200; // window.innerWidth;
           canvas.height = 720; // window.innerHeight;
           body.appendChild(canvas);
       };
       setup();
   </script>
</html>

In this example the Context of the Canvas is grabbed. The Canvas object is a DOM element, while the Context here is a handle to the drawing API that can be used to modify the Canvas Visual layer.

The width and the height are set to 1200 x 720. Every time the user resizes the screen the canvas will remain this size.

For the purpose of Grids the window.innerWidth and window.innerHeight sizes of a Canvas is used, which allows to occupy the full screen for the user.

HTML5-Canvas.jpg

Tags: engine, game, coding, programming, graphic
Categories: Tutorial, reST
Parent: HTML5

Update entry (Admin) | See changes

Comment on This Data Unit