HTML5 game without Canvas?

Question

I'm looking into writing my first HTML5 game, and everything I see talks about Canvas, and then goes on to talk about things like events, game loops, etc.

I'm planning on making a board game, where all the images are laid out on a grid. There doesn't need to be a game loop happening, because everything will just sit there just how it is until the user interacts with the game. And because the images for the board and pieces are laid out on a grid, I could just as easily (as far as I can tell) use tags, laid out with standard CSS, instead of drawing it all into a canvas element.

So is there a reason I should bother with canvas here? Does it make sense to just use "normal webpage" HTML elements to create my game interface?

Answer 1

Canvas is great for making games where things aren't a square, such as isometric or hexagon tile game, or an action based game where the player's sprite needs a wide range of movement, or something like Angry Birds where nothing is really grid based. For other things, it's probably overkill, though it might allow for quicker image processing and effects, due to being hardware accelerated in many modern browsers.

For what you're talking about, a grid based board game, it's perfectly fine to use normal HTML elements. If you're not going to need any fancy graphics effects, then you can safely ignore the canvas tag.

Side note: you could use canvas to make dynamic dice roll animations. It'd spice things up a bit, and give dice rolls an added 'suspense' effect. Or you could use 6 (or 12) animated gifs, just as easily.

Answer 2

There is a significant difference between html5 / css3 and a javascripted canvas tag.

HTML5 / CSS3
In this case you are just using the updated tags to present content, modified by some nifty css properties. You would then use "standard" js (and js frameworks) to control game logic and define user interactions and animations (or use CSS3 transitions to control any animation).

As you know, to create a couple rectangles:

div#red{
background-color:red;
height:50px;
width:50px;
position:relative;
}
div#blue{
background-color:blue;
height:50px;
width:50px;
position:relative;
}
<div id="red"></div>
<div id="blue"></div>

If you wanted to make this (unnecessarily) HTML5, they could be sections instead of divs. CSS3 definitely gives you a lot of nice new presentation features, specifically things like box-shadow.

Canvas
This is a fundamentally different way of working - much closer to something like Flash / Actionscript where content and presentation are defined programmatically, via javascript. For example - this is how you would create a similar couple of rectangles:

var canvas = document.getElementById("canvas");
function draw() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }

In a similar way, game logic and user interactions are defined. The flexibility and power of this later example cannot be overstated.

I say all of this simply to illustrate the fundamental difference in these two technologies. Now, IF you can do everything you want to do with markup, css and javascript behaviors, then by all means, do so. There is nothing wrong with this.

Working with the canvas tag, on the other hand, may give you increased flexibility and control over your project, allowing, for example, much more complicated and nuanced animations and interactions.

Finally, there are inherent issues with both of these routes, specifically, browser support. If you are targeting only the newest browsers, then I'm not sure it matters, but go back a couple generations and support drops off swiftly.