Share via

HTML 5: How to use the canvas

  • Article

Canvas seems to be a big deal with HTML 5, and quite rightly so, canvas is an important part of game design

Introduction to HTML 5 Canvas

An Introduction to the HTML 5 Canvas Element, date: Sept. 1, 2010, so it isn’t quite up to the latest specifications, but it works (make sure to read comments for the modification required to make the initial code sample work):

https://msdn.microsoft.com/en-us/scriptjunkie/ff961912.aspx

 

HTML 5 Canvas Library

So what about a library that you can use with the canvas items you are creating?

Here is “a basic HTML 5 canvas drawing library for those familiar with the java.awt.Graphics class in Java. It also comes with a JavaScript implementation of the game Breakout to demonstrate using the library.

Various utility methods will be added to this library over time to abstract away the low-level drawing methods found in HTML 5 canvas. Feel free to make requests to improve this library.”

(Quoting from the link below.)

https://canvastoolkit.codeplex.com/

Finally, HTML 5 Specifications

Remember, reading the specification can help make you an expert

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly:

However, “…Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading….” From the HTML 5 specifications.