Wednesday, June 30, 2010

Experimenting with HTML Canvas

I am starting to get interested in using the HTML canvas element with GWT.
I have downloaded the gwt-canvas project, which provides a very nice API wrapper.  The first thing I did was extend it to add text support.  Okay, I only added text support for browsers that support it.

Anyway, that brings me to my first pain point.  Experimenting with canvas in GWT is extremely time consuming, as you must recompile to JavaScript every time you make a change.  (Canvas is not supported in hosted mode, AFAIK!)

However, there is an extremely easy way to experiment with the canvas:
  • Get firefox, and the firebug addon.
  • Save the following text to the file canvas.html :

<html>
<body>
<canvas id="canvas" width="300" height="200" style="border: 1px solid black;">Time to upgrade!</canvas>
</body>
</html>

  • In Firefox, select "File/Open File", and open the file you just saved.
  • You should see the following:


  • Open firebug (in the bottom right corner), and select the Console tab
  • You are now ready to experiment!  Just type your javascript into the console command prompt, ">>>".
  • For example, you might go to the Mozilla Drawing Graphics with Canvas tutorial, and copy those commands, one line at a time, into the command prompt:

There you have it! A command line interface for experimenting with canvas, with things you probably had lying around the home!

1 comment:

Boller said...

I dont know how you do it, but at my setup i can use canvas in hostedmode/oophm and see the canvas.


/Flemming