StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There is a significant difference between html5 / css3 and a javascripted canvas tag.</p> <p><strong>HTML5 / CSS3</strong><br> 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). </p> <p>As you know, to create a couple rectangles:</p> <pre><code>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> </code></pre> <p>If you wanted to make this (unnecessarily) HTML5, they could be <code>section</code>s instead of <code>div</code>s. CSS3 definitely gives you a lot of nice new presentation features, specifically things like <code>box-shadow</code>. </p> <p><strong>Canvas</strong><br> 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:</p> <pre><code>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); } </code></pre> <p>In a similar way, game logic and user interactions are defined. The flexibility and power of this later example cannot be overstated. </p> <p>I say all of this simply to illustrate the fundamental difference in these two technologies. Now, <em>IF</em> 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.</p> <p>Working with the canvas tag, on the other hand, may give you increased flexibility and control over your project, allowing, for example, <em>much more complicated and nuanced animations and interactions</em>. </p> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload