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


This short tutorial discusses advantages of the HTML5 2D canvas element. The HTML5 2D canvas element's type name is, CanvasRenderingContext2D. The Surface Game references a CanvasRenderingContext2D by the variable, context. This article includes links to detailed topics regarding the canvas.

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, lightweight vector graphics (SVG), image display, animation, and visual 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.

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 other 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.


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.

Page 15

Game Tutorial for Beginners was prepared a few years ago. HTML5, CSS3, and JavaScript have improved over time, yet this free course continues to include useful features and long standing software development techniques. Enjoy more projects with free Web & game development tutorials.


free tutorials, learn web design, learn web programming, read books online free, free ebooks, free books online,free books to read, online books, learn web development, STEM, CSS 3, HTML 5, Web developer, learn to code, learn programming, interactive web design, interactive website design,

Copyright © 2015 Seven Thunder Software. All Rights Reserved.