Game Design with the HTML5 Canvas

Free HTML5 Game Tutorial for Beginners: Page 15

Overview Canvas Advantages Canvas Tutorials Summary Canvas Source Code
Canvas Icon

Overview

This short tutorial discusses advantages of the HTML5 2D canvas element. Links to detailed topics regarding the canvas are included.

Canvas Advantages

HTML5 introduced the revolutionary canvas element to Web programming. The HTML5 canvas includes many features, such as support for mobile touch events, drag and drop, light weight vector graphics, image display, animation, and special effects. The canvas displays on a range of devices from Android, to iPad, iPhone, Blackberry 10, Windows phones, as well as full desktop computers such as Windows PCs and Macintosh computers.

Many devices have stopped support of Flash. Flash games require a separate plugin, with code to verify the plugin's availability and version level. The canvas doesn't require a plugin which streamlines software development. The HTML5 2D canvas offers a range of features.

User interaction for the Surface Game happens within the canvas element. The Surface Game's prepared with the model-view-controller design pattern. The view includes those parts of the game which display graphics and other visual information to the player. The view includes the canvas, an image, CSS, and textual output.

The links below include game design tutorials which use the HTML5 2D canvas. The tutorials implement components of the Surface Game. However Surface Game components and concepts include many features useful for a range of online games.

Canvas Tutorials

Learn how to Draw and Redraw to the Canvas, Resize the Canvas and Coordinates, and Locate Graphics on the Canvas by Touch. The tutorials provide detailed explanation with source code, for each topic.

Summary

This short tutorial discussed advantages of the HTML5 2D canvas element. Links to detailed topics regarding the canvas are included.

Have fun and love learning! For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.