Exploring The HTML 5 Canvas For Flash Developers #2: Tracking The Mouse To Draw On The Screen

After a week where confusion about the future of the Flash platform has been piled on to developers by moves outside their control, we present the second in our series of HTML 5 Canvas for Flash Developers.  We call these tutorials, but really they are more like explorations.  We are learning this thing at the same time you are learning it.  hopefully these will be beneficial in the long run.

Drawing On The HTML 5 Canvas

One of the most basic things that can be accomplished with an HTML Canvas is drawing with the mouse. In this tutorial we will quickly show you the code for achieving this in HTML 5 with a Canvas element. We are not saying this is the best or most efficient way to do it, just one way to tackle the problem.

Creating A Simple Flash-like”Trace” Window In HTML

The first thing that will drive Flash developers crazy when working in browser JavaScript is the lack of good, out of the box, debugging tools for the web browser. You can install things like Firebug, or use an “alert” box, but we have a found a much simpler, easier way to create a “Flash-like” trace() in JavaScript, on the same page as the Canvas. It is very basic and involves a



Test the code.

Flash Developer Digestion

Did you notice something about this code? We never created any objects or MovieClips or Sprites or any other high level object to define the screen, the background, or anything we drew. Drawing the way we did in the is example is akin to using an old "plotter" printer. We kept adjusting the "print head" the moveTo() functions, and then comitted them to "paper" with the lineTo(); and stroke(); This is the method we will use as we continue these tutorials. We will think of the Canvas one a piece of paper that we either continuously draw to (like this example) or needs to be completed erased and redrawn every time time we need to change something (like when you move a sprite in a game).

So you can now see, the HTML 5 Canvas is really just a low-level display area for you to draw on to. In the next lesson we will start adding and tracking bitmap images.




If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
This site is protected by Comment SPAM Wiper.