Lesson 2 - Canvas graphics

Task Discussion

• 
  Jay   May 6, 2011, 1:28 p.m.

  I have a couple of questions after watching the videos...

  1.  I have thought about using google's App Engine because I have all the java classes written.  If I do that, will the game run slower or less effectively?

  2. Also, the canvas looks cool, but would it be a huge advantage for me in drawing the game table over just using plain div tags with css?

• 
  Jono Xia   May 8, 2011, 1:44 a.m.
  In Reply To:   Jay   May 6, 2011, 1:28 p.m.

  Hi Jay,

  1. I don't know much about Google App Engine, but as I understand it's about helping you with the server-side - your Java classes can run on Google's hosted servers, but they're still going to have to output an HTML document to creat your interface and animation and so on, so most of the techniques there will still be the same as if you just hand-coded HTML and JS files.  App Engine may help you implement multiplayer, though.  (It may help you a lot.)

   

  2. For some games Canvas might not be that much advantage over images and divs and tables.  (I'm actually working on a game of my own that displays a map as a bunch of images tiled inside a table; no canvas at all.)  That said Canvas does give you a level of precision down to the pixel that's hard to get any other way, it lets you draw curves and diagonals that would be very hard to make out of DOM nodes, and it gives you transparencies and transformations (such as scaling and rotating) too.  For your card game, you might find some of those features helpful for spinning card images around to different angles or for stacking them.  But you could also find non-canvas ways of doing those things (CSS3 transforms can be used to rotate card images, too).  It's ultimately up to you; I think you should give this week's canvas exercises a try, to get a feel for how it works and how helpful it would be, and then make up your own mind.

• 
  Tyler Cipriani   May 6, 2011, 10:34 a.m.

  Quick comment about video Lesson 2.4 - you can acutally use jQuery to retrieve your canvas element - you just need the canvas object and not the jquery object. That means instead of:

  var ctx =$('#canvasID').getContext('2d');

  You need:

  var ctx = $('#cavasID')[0].getContext('2d');

• 
  Jono Xia   May 6, 2011, 2:14 p.m.
  In Reply To:   Tyler Cipriani   May 6, 2011, 10:34 a.m.

  Oh, cool!  Thanks for the tip, Tyler!