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 and JavaScript function named “trace()”. but the usage is fairly simple. insert trace() calls in your code, just like you would in Flash, and they will show-up in the <textarea> on the HTML page. It’s a simple, brute-force way to test your running JavaScript. The code is below. You will see this demonstrated on our code page i nthe next section. <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 9 10 </div></td><td><div class="javascript codecolorer"> <script type="text/javascript"> var trace; function trace(text) { document.trace.tracetext.value +='\n' + text; } </script>   <div style="position: absolute; top: 600px; left: 50px;"> <form name="trace"> <textarea rows=20 cols=50 id="tracetext" >trace started</div></td></tr></tbody></table></div> </form></div> [/cc] Note: you may need to update the style position of the trace() box depending on the size of your canvas, or where you would like it to appear on the screen. You can also use something like <a onclick="javascript:pageTracker._trackPageview('/outgoing/v2.easy-designs.net/code/jsTrace/');" href="http://v2.easy-designs.net/code/jsTrace/">JsTrace</a> to solve this problem, but we had fun making our own anyway. Preloading The Page Yep, Flash developers, just like in good old ActionScript, you will need to know when the HTML page has finished loading before you can start working with your <canvas>. This goes for any kind of JavaScript. As a Flash developer you will need start thinking in Flash” terms for HTML, even if you are not used to doing that. Pre-loading is just the first one. You can test to see if the browser window has loaded by listening for the “load” event like this: <blockquote> <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 </div></td><td><div class="javascript codecolorer">window.addEventListener('load', eventWindowLoaded, false);</div></td></tr></tbody></table></div> </blockquote> Notice below that you will never see the “started” trace in out trace window, just the “loaded” one. This is because the trace() function does not exist before the page is loaded. <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 9 10 11 12 </div></td><td><div class="javascript codecolorer"><script type="text/javascript"><! main(); var trace; function main() { window.addEventListener('load', eventWindowLoaded, false); trace('started'); } function eventWindowLoaded() { trace('loaded'); } </script></div></td></tr></tbody></table></div> <a href="/html5canvas/project_2_paint/canvasloaded.html">Test the code</a>. Loading The Canvas Element Next we need to get a reference to the <canvas> element we created on the HTML page. This is roughly the equivalent of getting a reference to the document class in AS3. The name of the <canvas> element we will create in the HTML is “canvasOne”. After we that, we create a 600×400 rectangle on the canvas and fill it with a dark color. This will act as the background of the bitmap canvas. <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;height:300px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 </div></td><td><div class="javascript codecolorer"><script type="text/javascript"> function eventWindowLoaded() { trace('loaded'); var elem = document.getElementById('canvasOne'); if (!elem || !elem.getContext) { return; } context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#DDDDDD'; context.fillRect(0, 0, 600, 400); </script> <body> <canvas id="canvasOne" width="600" height="400"> Your browser does not support the HTML 5 Canvas. </canvas> </body></div></td></tr></tbody></table></div> Tracking Mouse movement To continue, we will now track the movement of the mouse over the canvas. To do this, we will add some Event Listeners that are very similar the ones you would us in Flash. Since elem is a reference to the canvas, we will add listeners for “mousemove”, “mousedown”, mouseup” and then create callback functions for each (eventMouseUp, eventMouseDown, eventMouseMove) Now, you will notice something that will give you hives as a Flash Developer: browser specific code. To make sure we are tracking the proper location on the canvas in Firefox and Opera, we must test some values and adjust accordingly. This code appears in the eventMouseMove() function below. To be honest, this type of checking might go away as browser support for HTML 5 continues to improve, but for now it appears to be a necessary check, so we have left it in the code. Since I’m no expert in cross browser JavaScript, I won’t even try to explain why this is required. However, you can get more information here <a onclick="javascript:pageTracker._trackPageview('/outgoing/dev.opera.com/articles/view/html5-canvas-painting/');" href="http://dev.opera.com/articles/view/html5-canvas-painting/">http://dev.opera.com/articles/view/html5-canvas-painting/</a>. notice, this site has a very similar painting example (this tutorial was based, in part, on the examples shown there) that you should explore after you read this as it adds even more functionality than we do here. All the code does below is track the mouse and use our new “Trace” window to tell us where the mouse is when it moves. We will use this information in the next example to draw on the canvas. <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;height:300px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 </div></td><td><div class="javascript codecolorer">function eventWindowLoaded() { trace('loaded'); var elem = document.getElementById('canvasOne'); elem.addEventListener("mousemove",eventMouseMove, false); elem.addEventListener("mousedown",eventMouseDown, false); elem.addEventListener("mouseup",eventMouseUp, false); if (!elem || !elem.getContext) { return; } context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#DDDDDD'; context.fillRect(0, 0, 600, 400); } function eventMouseMove(event) { if ( event.layerX || event.layerX == 0) { // Firefox mouseX = event.layerX; mouseY = event.layerY; } else if (event.offsetX || event.offsetX == 0) { // Opera mouseX = event.offsetX; mouseY = event.offsetY; } trace('mouse move' + mouseX +"," + mouseY); } function eventMouseDown() { trace("Mouse Down"); } function eventMouseUp(event) { trace("Mouse Up"); }</div></td></tr></tbody></table></div> <a href="/html5canvas/project_2_paint/canvasmouse1.html">Test the code</a>. Drawing In this final example, we will add the drawing functions. The first thing we will do is add a new boolean variable named isDrawing and set it to false. We will use this vazribale to test to see if the mouse button is pressed and drawing at any given moment. Next, we will add some code to the the eventMouseDown() and eventMouseUp() functions. These function will now set isDrawing to true (down)or false (up) for that our onMouseMove() function will know if it should draw anything on the canvas or not: <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 </div></td><td><div class="javascript codecolorer">function eventMouseDown() { isDrawing = true; } function eventMouseUp(event) { isDrawing = false; }</div></td></tr></tbody></table></div> Now we get to the heart if the drawing function. in eventMouseMove()we will use this isDrawing boolean to figure out what we are suppose to do. If isDrawing is false, we always get set to draw if we need do it the next time eventMouseMove() is called. We do this by calling context.beginPath() and then by setting the current context to draw at the mouse location with context.moveTo(). however we DON’T DRAW yet. We just get ready to draw. If isDrawing is true, then we set the color to red with context.strokeStyle = ‘#FF0000′; set the line with context.lineTo(mouseX, mouseY); and then draw it with context.stroke(); <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 9 10 11 </div></td><td><div class="javascript codecolorer"> if (!isDrawing) { context.beginPath(); context.moveTo(mouseX, mouseY); } else { context.strokeStyle = '#FF0000'; context.lineTo(mouseX, mouseY); context.stroke(); }</div></td></tr></tbody></table></div> One other interesting thing to note about this code is the <div> that contains the canvas element in the HTML code. I was having trouble with the offsets of the mouse position relative to position of the canvas on the screen (even with the magic broswer-specifc JavaScript above). If it was lower on the screen screen using some hard white-space (i.e. etc), the drawing on the canvas would be offset by that much. However, I was able to fix this by using absolute positioning with the <div> on the page: <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 </div></td><td><div class="javascript codecolorer"><div id="content" style="position: absolute; top: 100px; left: 50px;"> <canvas id="canvasOne" width="600" height="400"> Your browser does not support the HTML 5 Canvas. </canvas> </div></div></td></tr></tbody></table></div> Even though this has worked in every browser I have tried, I can’t tell you positively that it will work everywhere. I hope this is a permanent fix for calculating the mouse x,y position offsets. I’m sure we will learn a lot more about this as these tutorials continue. Anyway, test this code below. We are all learning this stuff together, so any ideas, comments, etc. would be greatly appreciated. If you find some browser oddities or inconsistencies (or simply some code improvements) don’t hesitate to make us aware of them. <div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:550px;height:300px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 </div></td><td><div class="javascript codecolorer"><html lang="en"> <head> <meta charset="utf-8"> <title>HTML 5 Canvas Project #1: Hello World</title> <script type="text/javascript"><! main(); var mouseX; var mouseY; var context; var trace; var isDrawing = false; function main() { window.addEventListener('load', eventWindowLoaded, false); trace('started'); } function eventWindowLoaded() { trace('loaded'); var elem = document.getElementById('canvasOne'); if (!elem || !elem.getContext) { return; } context = elem.getContext('2d'); if (!context) { return; } elem.addEventListener("mousemove",eventMouseMove, false); elem.addEventListener("mousedown",eventMouseDown, false); elem.addEventListener("mouseup",eventMouseUp, false); context.fillStyle = '#DDDDDD'; context.fillRect(0, 0, 600, 400); } function eventMouseMove(event) { if ( event.layerX || event.layerX == 0) { // Firefox mouseX = event.layerX ; mouseY = event.layerY; } else if (event.offsetX || event.offsetX == 0) { // Opera mouseX = event.offsetX; mouseY = event.offsetY; } if (!isDrawing) { context.beginPath(); context.moveTo(mouseX, mouseY); } else { context.strokeStyle = '#FF0000'; context.lineTo(mouseX, mouseY); context.stroke(); } trace('mouse move' + mouseX +"," + mouseY); } function eventMouseDown() { trace("Mouse Down"); isDrawing = true; } function eventMouseUp(event) { trace("Mouse Up"); isDrawing = false; } </script> </head> <body> <div id="content" style="position: absolute; top: 100px; left: 50px;"> <canvas id="canvasOne" width="600" height="400"> Your browser does not support the HTML 5 Canvas. </canvas> </div> <script type="text/javascript"> function trace(text) { document.trace.tracetext.value +='\n' + text; } </script> <div style="position: absolute; top: 600px; left: 50px;" <form name="trace"> <textarea rows=20 cols=50 id="tracetext" >trace started</textarea> </form> </div> </body> </html></div></td></tr></tbody></table></div> <a href="/html5canvas/project_2_paint/canvaspaint2.html">Test the code</a>. 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. <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.8bitrocket.com%2F2010%2F04%2F11%2Fexploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen%2F&layout=standard&show_faces=true&width=300&height=25&action=like&font=arial&colorscheme=light" id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0" allowTransparency="true" class="fbLikeContainer" style="border:none; overflow:hidden; width:300px; height:25px; display:inline;" ></iframe><div class="socialize-containter" style="background-color:#FFEAA8; border: 2px solid #ddd;"><div class="socialize-buttons"><div class="socialize-button"><a onclick="javascript:pageTracker._trackPageview('/outgoing/twitter.com/share');" href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/" data-text="Exploring The HTML 5 Canvas For Flash Developers #2: Tracking The Mouse To Draw On The Screen" data-count="vertical" data-via="tweetmeme" ></a></div><div class="socialize-button"><script>  </script> <script src="http://widgets.fbshare.me/files/fbshare.js"></script></div><div class="socialize-button"><script type="text/javascript"> </script><a onclick="javascript:pageTracker._trackPageview('/outgoing/digg.com/submit?url=http%3A%2F%2Fwww.8bitrocket.com%2F2010%2F04%2F11%2Fexploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen%2F');" class="DiggThisButton DiggMedium" href="http://digg.com/submit?url=http%3A%2F%2Fwww.8bitrocket.com%2F2010%2F04%2F11%2Fexploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen%2F"></a></div><div class="socialize-button"><script type="in/share" data-url="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/" data-counter="top"></script></div><div class="socialize-button"><g:plusone size="tall" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/"></g:plusone></div></div><div class="socialize-text"></div></div><div class="snap_nopreview sharing robots-nocontent"><ul><li class="sharing_label">Share this:</li><li class="share-print share-regular"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/#print');" rel="nofollow" class="share-print share-icon" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/#print" target="_blank" title="Click to print">Print</a></li><li class="share-digg share-regular"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=digg');" rel="nofollow" class="share-digg share-icon" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=digg" target="_blank" title="Click to Digg this post">Digg</a></li><li class="share-reddit share-regular"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=reddit');" rel="nofollow" class="share-reddit share-icon" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=reddit" target="_blank" title="Click to share on Reddit">Reddit</a></li><li class="share-facebook share-regular"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=facebook');" rel="nofollow" class="share-facebook share-icon" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=facebook" target="_blank" title="Share on Facebook">Facebook</a></li><li class="share-stumbleupon share-regular"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=stumbleupon');" rel="nofollow" class="share-stumbleupon share-icon" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=stumbleupon" target="_blank" title="Click to share on StumbleUpon">StumbleUpon</a></li><li class="share-twitter share-regular"><div class="twitter_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fwww.8bitrocket.com%2F2010%2F04%2F11%2Fexploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen%2F&counturl=http%3A%2F%2Fwww.8bitrocket.com%2F2010%2F04%2F11%2Fexploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen%2F&count=horizontal&text=Exploring%20The%20HTML%205%20Canvas%20For%20Flash%20Developers%20%232%3A%20Tracking%20The%20Mouse%20To%20Draw%20On%20The%20Screen: " style="width:97px; height:20px;"></iframe></div></li><li class="share-email share-regular"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=email');" rel="nofollow" class="share-email share-icon" href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/?share=email" target="_blank" title="Click to email this to a friend">Email</a></li><li class="share-end"></li></ul><div class="sharing-clear"></div></div> </div> <div class="entry-utility"> This entry was posted in <a href="http://www.8bitrocket.com/category/tutorials/tutorial-html5-canvas/" title="View all posts in Tutorial-HTML5 Canvas" rel="category tag">Tutorial-HTML5 Canvas</a>, <a href="http://www.8bitrocket.com/category/tutorials/" title="View all posts in Tutorials" rel="category tag">Tutorials</a>. Bookmark the <a href="http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/" title="Permalink to Exploring The HTML 5 Canvas For Flash Developers #2: Tracking The Mouse To Draw On The Screen" rel="bookmark">permalink</a>. </div> </div> <div id="nav-below" class="navigation"> <div class="nav-previous"><a href="http://www.8bitrocket.com/2010/04/10/top-10-positive-things-for-me-about-the-apple-iphone-developer-clampdown/" rel="prev">← Top 10 Positive Things (for me) About The Apple iPhone Developer Clampdown</a></div> <div class="nav-next"><a href="http://www.8bitrocket.com/2010/04/12/tutorial-exploring-the-as3-bitmap-class-lesson-1-creating-a-basic-dynamic-tile-sheet/" rel="next">Tutorial: Exploring the AS3 Bitmap Class Lesson 1 – Creating a basic dynamic tile sheet. →</a></div> </div> <div id="disqus_thread"> <div id="dsq-content"> <ul id="dsq-comments"> <li class="post pingback"> Pingback: <a onclick="javascript:pageTracker._trackPageview('/outgoing/www.canvasboatshoes.org/what-kind-of-papercanvas-would-be-best-to-use-spray-paint-cans-on.html');" href='http://www.canvasboatshoes.org/what-kind-of-papercanvas-would-be-best-to-use-spray-paint-cans-on.html' rel='external nofollow' class='url'>What kind of paper/canvas would be best to use spray paint cans on?</a> </li> </li> </ul> </div> </div> <script type="text/javascript"> /* <![CDATA[ */ var disqus_url = 'http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/'; var disqus_identifier = '4372 http://www.8bitrocket.com/2010/04/11/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen/'; var disqus_container_id = 'disqus_thread'; var disqus_domain = 'disqus.com'; var disqus_shortname = '8bitrocket'; var disqus_title = "Exploring The HTML 5 Canvas For Flash Developers #2: Tracking The Mouse To Draw On The Screen"; var disqus_config = function () { var config = this; // Access to the config object /* All currently supported events: * preData — fires just before we request for initial data * preInit - fires after we get initial data but before we load any dependencies * onInit - fires when all dependencies are resolved but before dtpl template is rendered * afterRender - fires when template is rendered but before we show it * onReady - everything is done */ config.callbacks.preData.push(function() { // clear out the container (its filled for SEO/legacy purposes) document.getElementById(disqus_container_id).innerHTML = ''; }); config.callbacks.onReady.push(function() { // sync comments in the background so we don't block the page DISQUS.request.get('?cf_action=sync_comments&post_id=4372'); }); }; var facebookXdReceiverPath = 'http://www.8bitrocket.com/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ var DsqLocal = { 'trackbacks': [ { 'author_name': "What kind of paper\/canvas would be best to use spray paint cans on?", 'author_url': "http:\/\/www.canvasboatshoes.org\/what-kind-of-papercanvas-would-be-best-to-use-spray-paint-cans-on.html", 'date': "07\/22\/2010 05:04 PM", 'excerpt': "[...] Exploring The HTML 5 Canvas For Flash Developers #2: Tracking The … [...] ", 'type': "pingback" } ], 'trackback_url': "http:\/\/www.8bitrocket.com\/2010\/04\/11\/exploring-the-html-5-canvas-for-flash-developers-2-tracking-the-mouse-to-draw-on-the-screen\/trackback\/" }; /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.' + disqus_domain + '/embed.js?pname=wordpress&pver=2.69'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); /* ]]> */ </script> </div> </div> <div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"> <li id="search-3" class="widget-container widget_search"><form role="search" method="get" id="searchform" action="http://www.8bitrocket.com/" > <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form></li><li id="rss-2" class="widget-container widget_rss"><h3 class="widget-title"><a class='rsswidget' href='http://www.8bitrocket.com/phpbb/feed.php' title='Syndicate this content'><img style='border:0' width='14' height='14' src='http://www.8bitrocket.com/wp-includes/images/rss.png' alt='RSS' /></a> <a class='rsswidget' href='http://www.8bitrocket.com/phpbb/index.php' title='HTML5, Flash, Mobile Games And Game Development'>Forums</a></h3><ul><li><a class='rsswidget' href='http://www.8bitrocket.com/phpbb/viewtopic.php?t=38&p=112#p112' title='Maybe not the right place for this post, but MindJolt are actively seeking games developed in HTML5. (also Unity)Statistics: Posted by egdcltd — Sat Jan 28, 2012 6:31 pm […]'>HTML5 Canvas • MindJolt want your HTML5 games</a></li><li><a class='rsswidget' href='http://www.8bitrocket.com/phpbb/viewtopic.php?t=28&p=111#p111' title='Ha! I've got quite a few books now on html5 gaming and all of them mention how the audio of html5 blows! It's so painful to see so many leaps forward to allow true games to be produced, and they go and make such a fundamental flop in the sound department. Granted your book goes 150% into describing how to get the beast working and to good effect bu […]'>HTML5 Audio • Re: Christmas Tree Decorator</a></li><li><a class='rsswidget' href='http://www.8bitrocket.com/phpbb/viewtopic.php?t=37&p=110#p110' title='Speed is always an issue with browser+JavaScript games, worth a read is the speed performance test and related hacks and fixes that html5rocks.com has found.Read the article here http://www.html5rocks.com/en/tutorials/ ... rformance/ Statistics: Posted by JimBeeUK — Tue Jan 24, 2012 5:47 pm […]'>HTML5 Canvas • Canvas Speed</a></li><li><a class='rsswidget' href='http://www.8bitrocket.com/phpbb/viewtopic.php?t=36&p=109#p109' title='Just came across FunSockets, which is developing some HTML5 APIs and monetisation options. Currently in private Beta.Statistics: Posted by egdcltd — Mon Jan 09, 2012 1:32 pm […]'>HTML5 Tools/Libraries • FunSockets</a></li><li><a class='rsswidget' href='http://www.8bitrocket.com/phpbb/viewtopic.php?t=35&p=108#p108' title='good day everyone all the best have a gud new year alf beilinStatistics: Posted by alfred beilin — Wed Jan 04, 2012 11:35 pm […]'>HTML5 Canvas (book support) • happy new year</a></li></ul></li><li id="text-5" class="widget-container widget_text"><h3 class="widget-title">Feeds</h3> <div class="textwidget"><a href=http://feeds.feedburner.com/8bitrocketcomBlog>RSS - Content</a> <a href=http://8bitrocket.disqus.com/latest.rss>RSS - Comments</a> </div> </li><li id="text-3" class="widget-container widget_text"><h3 class="widget-title">Books</h3> <div class="textwidget"> <a href="http://www.amazon.com/HTML5-Canvas-Steve-Fulton/dp/144939390X/ref=sr_1_1?ie=UTF8&qid=1305127120&sr=8-1" target="book"> <div align=center><img src="http://covers.oreilly.com/images/0636920013327/cat.gif" border="0" alt="" width="150" /> Buy It Now!</a></div> <a href="http://www.8bitrocket.com/books/the-essential-guide-to-flash-games/" target="book"> <div align=center><img src="http://www.8bitrocket.com/book/cover300.jpg" border="0" alt="" width="150" /> Buy It Now!</a></div> </div> </li><li id="text-6" class="widget-container widget_text"><h3 class="widget-title">Game Engines and Consulting Services</h3> <div class="textwidget"><div align=center>The consulting arm of 8bitrocket is... <a href="http://www.8bitrocket.com/consulting/"> <img src="http://www.8bitrocket.com/wp-content/uploads/2010/07/8bitrocket_consulting_logo.gif" border="0" alt="" width="150" /></a> <a href="http://www.8bitrocket.com/consulting/">Let us help you succeed!</a></div></div> </li><li id="related-links-by-category" class="widget-container widget_nrc"><h3 class="widget-title">Related Links</h3> <ul> <li class="serif">Tutorial-HTML5 Canvas<ul><li class="cat-item" id="related-cat-post-8721"><a href="http://www.8bitrocket.com/2011/12/14/html5-canvas-christmas-tree-drag-and-drop-demo-and-tutorial/" title="HTML5 Canvas Christmas Tree Drag And Drop Demo And Tutorial">HTML5 Canvas Christmas Tree Drag And Drop Demo And Tutorial</a></li><li class="cat-item" id="related-cat-post-6185"><a href="http://www.8bitrocket.com/2011/02/05/shorter-more-game-focused-tutorials-targeting-more-technologies-are-coming/" title="Shorter, More Game Focused Tutorials Targeting More Technologies Are Coming">Shorter, More Game Focused Tutorials Targeting More Technologies Are Coming</a></li><li class="cat-item" id="related-cat-post-4819"><a href="http://www.8bitrocket.com/2010/08/09/html5-canvas-re-size-demo/" title="HTML5 Canvas Resize On The Fly, In An HTML Page">HTML5 Canvas Resize On The Fly, In An HTML Page</a></li><li class="cat-item" id="related-cat-post-4367"><a href="http://www.8bitrocket.com/2010/05/18/html-5-canvas-using-processing-js-to-develop-canvas-apps/" title="HTML 5 Canvas: Using Processing.js To Develop Canvas Apps">HTML 5 Canvas: Using Processing.js To Develop Canvas Apps</a></li><li class="cat-item" id="related-cat-post-4368"><a href="http://www.8bitrocket.com/2010/05/15/html-5-canvas-creating-gaudy-text-animations-just-like-flash-sort-of/" title="HTML 5 Canvas: Creating Gaudy Text Animations...Just Like Flash! (sort of)">HTML 5 Canvas: Creating Gaudy Text Animations...Just Like Flash! (sort of)</a></li></ul></li><li class="serif">Tutorials<ul><li class="cat-item" id="related-cat-post-8721"><a href="http://www.8bitrocket.com/2011/12/14/html5-canvas-christmas-tree-drag-and-drop-demo-and-tutorial/" title="HTML5 Canvas Christmas Tree Drag And Drop Demo And Tutorial">HTML5 Canvas Christmas Tree Drag And Drop Demo And Tutorial</a></li></ul></li> </ul> </li><li id="enhanced-categories" class="widget-container EnhancedCategoriesWidget_render_widget"><h3 class="widget-title">Site Content</h3><script type="text/javascript"> jQuery(document).ready(function() { jQuery('ul.enhanced-categories-1').enhancedCategories({ // Override here the default settings for the plugin expandText : '»', contractText : '«', leafText : '-', expandImage : 'http://managemsucks.tempwebpage.com/wp-content/plugins/enhanced-categories/images/expand.gif', contractImage : 'http://managemsucks.tempwebpage.com/wp-content/plugins/enhanced-categories/images/contract.gif', leafImage : 'http://managemsucks.tempwebpage.com/wp-content/plugins/enhanced-categories/images/leaf.gif', isButtonAfter : 1, buttonColor : '#AA0000', contractChildren: 1 }); }); </script> <ul class="enhanced-categories-1"> <li class="cat-item cat-item-18"><a href="http://www.8bitrocket.com/category/56k-connection/" title="View all posts filed under 56k Connection">56k Connection</a> </li> <li class="cat-item cat-item-5"><a href="http://www.8bitrocket.com/category/8bitrocket-history/" title="View all posts filed under 8bitrocket History">8bitrocket History</a> </li> <li class="cat-item cat-item-135"><a href="http://www.8bitrocket.com/category/android-development/" title="View all posts filed under Android Development">Android Development</a> </li> <li class="cat-item cat-item-131"><a href="http://www.8bitrocket.com/category/app-store-revolution/" title="View all posts filed under App Store Revolution">App Store Revolution</a> </li> <li class="cat-item cat-item-19"><a href="http://www.8bitrocket.com/category/apple/" title="View all posts filed under Apple">Apple</a> </li> <li class="cat-item cat-item-138"><a href="http://www.8bitrocket.com/category/april-1st/" title="View all posts filed under April 1st">April 1st</a> </li> <li class="cat-item cat-item-6"><a href="http://www.8bitrocket.com/category/atari-nerd/" title="View all posts filed under Atari Nerd">Atari Nerd</a> <ul class='children'> <li class="cat-item cat-item-88"><a href="http://www.8bitrocket.com/category/atari-nerd/atari-navel-gazing/" title="View all posts filed under Atari Navel Gazing">Atari Navel Gazing</a> </li> <li class="cat-item cat-item-86"><a href="http://www.8bitrocket.com/category/atari-nerd/atari-nerd-chronicles/" title="View all posts filed under Atari Nerd Chronicles">Atari Nerd Chronicles</a> </li> <li class="cat-item cat-item-89"><a href="http://www.8bitrocket.com/category/atari-nerd/atari-poetry/" title="View all posts filed under Atari Poetry">Atari Poetry</a> </li> <li class="cat-item cat-item-159"><a href="http://www.8bitrocket.com/category/atari-nerd/electronic-games-magazine/" title="View all posts filed under Electronic Games Magazine">Electronic Games Magazine</a> </li> <li class="cat-item cat-item-124"><a href="http://www.8bitrocket.com/category/atari-nerd/intellivision/" title="View all posts filed under Intellivision">Intellivision</a> </li> <li class="cat-item cat-item-93"><a href="http://www.8bitrocket.com/category/atari-nerd/interviews/" title="View all posts filed under Interviews">Interviews</a> </li> <li class="cat-item cat-item-102"><a href="http://www.8bitrocket.com/category/atari-nerd/misc-retro-games/" title="View all posts filed under Misc Retro Games">Misc Retro Games</a> </li> <li class="cat-item cat-item-133"><a href="http://www.8bitrocket.com/category/atari-nerd/movies-the-need-to-be-made/" title="View all posts filed under Movies the Need To Be Made">Movies the Need To Be Made</a> </li> <li class="cat-item cat-item-152"><a href="http://www.8bitrocket.com/category/atari-nerd/rest-in-peace/" title="View all posts filed under Rest In Peace">Rest In Peace</a> </li> <li class="cat-item cat-item-148"><a href="http://www.8bitrocket.com/category/atari-nerd/retro-excavation/" title="View all posts filed under Retro Excavation">Retro Excavation</a> </li> <li class="cat-item cat-item-158"><a href="http://www.8bitrocket.com/category/atari-nerd/retro-game-magazines/" title="View all posts filed under Retro Game Magazines">Retro Game Magazines</a> </li> <li class="cat-item cat-item-151"><a href="http://www.8bitrocket.com/category/atari-nerd/the-8-bit-game/" title="View all posts filed under The 8-bit Game">The 8-bit Game</a> </li> <li class="cat-item cat-item-144"><a href="http://www.8bitrocket.com/category/atari-nerd/this-day-in-atari-history-atari-nerd/" title="View all posts filed under This Day In Atari History">This Day In Atari History</a> </li> <li class="cat-item cat-item-145"><a href="http://www.8bitrocket.com/category/atari-nerd/this-week-in-atari-history/" title="View all posts filed under This Week in Atari History">This Week in Atari History</a> </li> <li class="cat-item cat-item-160"><a href="http://www.8bitrocket.com/category/atari-nerd/truth-in-advertising/" title="View all posts filed under Truth In Advertising">Truth In Advertising</a> </li> </ul> </li> <li class="cat-item cat-item-51"><a href="http://www.8bitrocket.com/category/atari-st/" title="View all posts filed under Atari ST">Atari ST</a> </li> <li class="cat-item cat-item-48"><a href="http://www.8bitrocket.com/category/contest-tracker/" title="Tracking web, viral, retro Flash, Silverlight, Canvas, etc. game development contests.">Contest Tracker</a> </li> <li class="cat-item cat-item-128"><a href="http://www.8bitrocket.com/category/contests/" title="View all posts filed under Contests">Contests</a> <ul class='children'> <li class="cat-item cat-item-127"><a href="http://www.8bitrocket.com/category/contests/atari-contest-atari-nerd/" title="View all posts filed under Atari 16K Contest 2010">Atari 16K Contest 2010</a> </li> </ul> </li> <li class="cat-item cat-item-162"><a href="http://www.8bitrocket.com/category/corona-development/" title="Corona Development">Corona Development</a> </li> <li class="cat-item cat-item-140"><a href="http://www.8bitrocket.com/category/daily-briefing/" title="View all posts filed under Daily Briefing">Daily Briefing</a> </li> <li class="cat-item cat-item-4"><a href="http://www.8bitrocket.com/category/diatribe/" title="View all posts filed under diatribe">diatribe</a> <ul class='children'> <li class="cat-item cat-item-14"><a href="http://www.8bitrocket.com/category/diatribe/forgotten-heroes-80s-guitar-rock/" title="View all posts filed under Forgotten Heroes: 80's Guitar Rock">Forgotten Heroes: 80's Guitar Rock</a> </li> <li class="cat-item cat-item-10"><a href="http://www.8bitrocket.com/category/diatribe/lost-south-bay/" title="View all posts filed under Lost South Bay">Lost South Bay</a> </li> <li class="cat-item cat-item-16"><a href="http://www.8bitrocket.com/category/diatribe/management-sucks/" title="View all posts filed under Management Sucks">Management Sucks</a> </li> <li class="cat-item cat-item-7"><a href="http://www.8bitrocket.com/category/diatribe/music-with-no-talent/" title="View all posts filed under Music with No Talent">Music with No Talent</a> </li> <li class="cat-item cat-item-122"><a href="http://www.8bitrocket.com/category/diatribe/simply-brilliant/" title="View all posts filed under Simply Brilliant">Simply Brilliant</a> </li> </ul> </li> <li class="cat-item cat-item-141"><a href="http://www.8bitrocket.com/category/easter/" title="View all posts filed under Easter">Easter</a> </li> <li class="cat-item cat-item-153"><a href="http://www.8bitrocket.com/category/electrotank-2/" title="View all posts filed under Electrotank">Electrotank</a> </li> <li class="cat-item cat-item-23"><a href="http://www.8bitrocket.com/category/essential-flash-games-book/" title="View all posts filed under Essential Flash Games Book">Essential Flash Games Book</a> </li> <li class="cat-item cat-item-91"><a href="http://www.8bitrocket.com/category/features-games/" title="View all posts filed under Featured Games">Featured Games</a> </li> <li class="cat-item cat-item-3"><a href="http://www.8bitrocket.com/category/flash-game-development/" title="View all posts filed under Flash Game Development">Flash Game Development</a> </li> <li class="cat-item cat-item-123"><a href="http://www.8bitrocket.com/category/game-coding-and-development-diary/" title="View all posts filed under Game Coding and Development Diary">Game Coding and Development Diary</a> </li> <li class="cat-item cat-item-21"><a href="http://www.8bitrocket.com/category/game-design-and-theory/" title="View all posts filed under Game Design And Theory">Game Design And Theory</a> </li> <li class="cat-item cat-item-134"><a href="http://www.8bitrocket.com/category/game_programmers_tool_kit/" title="View all posts filed under Game Programming Tool Kit">Game Programming Tool Kit</a> </li> <li class="cat-item cat-item-147"><a href="http://www.8bitrocket.com/category/game-shift/" title="View all posts filed under Game Shift">Game Shift</a> </li> <li class="cat-item cat-item-26"><a href="http://www.8bitrocket.com/category/games/" title="View all posts filed under Games">Games</a> <ul class='children'> <li class="cat-item cat-item-130"><a href="http://www.8bitrocket.com/category/games/16k_game_contest_entry/" title="Games entered into the 2010 8bitrocket 16K Atari-inspired Retro-Remake Contest">16K Game Contest Entry</a> </li> <li class="cat-item cat-item-42"><a href="http://www.8bitrocket.com/category/games/action/" title="View all posts filed under Action">Action</a> </li> <li class="cat-item cat-item-41"><a href="http://www.8bitrocket.com/category/games/driving/" title="View all posts filed under Driving">Driving</a> </li> <li class="cat-item cat-item-40"><a href="http://www.8bitrocket.com/category/games/engine/" title="View all posts filed under Engine">Engine</a> </li> <li class="cat-item cat-item-139"><a href="http://www.8bitrocket.com/category/games/html5-canvas-games/" title="View all posts filed under HTML5 Canvas Games">HTML5 Canvas Games</a> </li> <li class="cat-item cat-item-43"><a href="http://www.8bitrocket.com/category/games/kids/" title="View all posts filed under Kids">Kids</a> </li> <li class="cat-item cat-item-46"><a href="http://www.8bitrocket.com/category/games/maze/" title="View all posts filed under Maze">Maze</a> </li> <li class="cat-item cat-item-39"><a href="http://www.8bitrocket.com/category/games/puzzle/" title="View all posts filed under Puzzle">Puzzle</a> </li> <li class="cat-item cat-item-37"><a href="http://www.8bitrocket.com/category/games/shooter/" title="View all posts filed under Shooter">Shooter</a> </li> <li class="cat-item cat-item-38"><a href="http://www.8bitrocket.com/category/games/word/" title="View all posts filed under Word">Word</a> </li> </ul> </li> <li class="cat-item cat-item-136"><a href="http://www.8bitrocket.com/category/google-chrome-web-app-store/" title="View all posts filed under Google Chrome Web App Store">Google Chrome Web App Store</a> </li> <li class="cat-item cat-item-30"><a href="http://www.8bitrocket.com/category/html-5-canvas/" title="View all posts filed under HTML 5 Canvas">HTML 5 Canvas</a> <ul class='children'> <li class="cat-item cat-item-165"><a href="http://www.8bitrocket.com/category/html-5-canvas/flash-to-html5/" title="View all posts filed under Flash to HTML5">Flash to HTML5</a> </li> <li class="cat-item cat-item-129"><a href="http://www.8bitrocket.com/category/html-5-canvas/html5-canvas-book/" title="View all posts filed under HTML5 Canvas Book">HTML5 Canvas Book</a> </li> <li class="cat-item cat-item-149"><a href="http://www.8bitrocket.com/category/html-5-canvas/the-bug-off-development-diary/" title="View all posts filed under The Bug Off Development Diary">The Bug Off Development Diary</a> </li> </ul> </li> <li class="cat-item cat-item-142"><a href="http://www.8bitrocket.com/category/inter-web-mash-up/" title="View all posts filed under Inter-Web Mash-Up">Inter-Web Mash-Up</a> </li> <li class="cat-item cat-item-103"><a href="http://www.8bitrocket.com/category/interviews-2/" title="View all posts filed under Interviews">Interviews</a> </li> <li class="cat-item cat-item-85"><a href="http://www.8bitrocket.com/category/ipodipad-develpment/" title="View all posts filed under iPod/iPad Develpment">iPod/iPad Develpment</a> </li> <li class="cat-item cat-item-12"><a href="http://www.8bitrocket.com/category/mid-core-gamer/" title="View all posts filed under Mid-Core Gamer">Mid-Core Gamer</a> </li> <li class="cat-item cat-item-17"><a href="http://www.8bitrocket.com/category/podcasts/" title="View all posts filed under Podcasts">Podcasts</a> </li> <li class="cat-item cat-item-101"><a href="http://www.8bitrocket.com/category/poll/" title="View all posts filed under Poll">Poll</a> </li> <li class="cat-item cat-item-150"><a href="http://www.8bitrocket.com/category/predictions/" title="View all posts filed under Predictions">Predictions</a> </li> <li class="cat-item cat-item-163"><a href="http://www.8bitrocket.com/category/producto-studios/" title="View all posts filed under Producto Studios">Producto Studios</a> </li> <li class="cat-item cat-item-137"><a href="http://www.8bitrocket.com/category/random-awesomeness/" title="View all posts filed under Random Awesomeness">Random Awesomeness</a> </li> <li class="cat-item cat-item-34"><a href="http://www.8bitrocket.com/category/reviews/" title="View all posts filed under Reviews">Reviews</a> <ul class='children'> <li class="cat-item cat-item-11"><a href="http://www.8bitrocket.com/category/reviews/required-reading/" title="View all posts filed under Book Reviews">Book Reviews</a> </li> <li class="cat-item cat-item-92"><a href="http://www.8bitrocket.com/category/reviews/flash-games/" title="Reviews of flash games">Flash Games</a> </li> <li class="cat-item cat-item-8"><a href="http://www.8bitrocket.com/category/reviews/required-playing/" title="View all posts filed under Game Reviews">Game Reviews</a> </li> <li class="cat-item cat-item-13"><a href="http://www.8bitrocket.com/category/reviews/mid-core-game-reviews/" title="View all posts filed under Mid-Core Game Reviews">Mid-Core Game Reviews</a> </li> <li class="cat-item cat-item-15"><a href="http://www.8bitrocket.com/category/reviews/world-famous-flash-retro-showcase/" title="View all posts filed under World Famous Flash Retro Showcase">World Famous Flash Retro Showcase</a> </li> </ul> </li> <li class="cat-item cat-item-166"><a href="http://www.8bitrocket.com/category/signs-of-doomsday/" title="View all posts filed under Signs Of Doomsday">Signs Of Doomsday</a> </li> <li class="cat-item cat-item-20"><a href="http://www.8bitrocket.com/category/silverlight/" title="View all posts filed under Silverlight">Silverlight</a> </li> <li class="cat-item cat-item-35"><a href="http://www.8bitrocket.com/category/sociology-of-programming/" title="View all posts filed under Sociology Of Programming">Sociology Of Programming</a> </li> <li class="cat-item cat-item-132"><a href="http://www.8bitrocket.com/category/star-wars/" title="View all posts filed under Star Wars">Star Wars</a> </li> <li class="cat-item cat-item-22"><a href="http://www.8bitrocket.com/category/they-used-our-kung-fu/" title="View all posts filed under They Used Our Kung Fu">They Used Our Kung Fu</a> </li> <li class="cat-item cat-item-143"><a href="http://www.8bitrocket.com/category/this-day-in-atari-history/" title="View all posts filed under This Day In Atari History">This Day In Atari History</a> </li> <li class="cat-item cat-item-24"><a href="http://www.8bitrocket.com/category/tutorials/" title="View all posts filed under Tutorials">Tutorials</a> <ul class='children'> <li class="cat-item cat-item-55"><a href="http://www.8bitrocket.com/category/tutorials/tutorial-flash/" title="View all posts filed under Tutorial-Flash">Tutorial-Flash</a> </li> <li class="cat-item cat-item-57"><a href="http://www.8bitrocket.com/category/tutorials/tutorial-html5-canvas/" title="View all posts filed under Tutorial-HTML5 Canvas">Tutorial-HTML5 Canvas</a> </li> </ul> </li> <li class="cat-item cat-item-84"><a href="http://www.8bitrocket.com/category/twinengine/" title="View all posts filed under TwinEngine">TwinEngine</a> </li> <li class="cat-item cat-item-1"><a href="http://www.8bitrocket.com/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a> </li> <li class="cat-item cat-item-9"><a href="http://www.8bitrocket.com/category/web-site-development/" title="View all posts filed under Web Site Development">Web Site Development</a> </li> </ul></li><li id="recent-comments-3" class="widget-container widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"><li class="recentcomments">Anonymous on <a href="http://www.8bitrocket.com/2012/02/03/atari-vets-getting-the-band-back-together-to-rock-mobile-games-likes-its-1979-all-over-again/#comment-4750">Atari Vets “Getting The Band Back Together” To Rock Mobile Games Like’s It’s 1979 All Over Again</a></li><li class="recentcomments"><a onclick="javascript:pageTracker._trackPageview('/outgoing/twitter.com/hayes_maker');" href='http://twitter.com/hayes_maker' rel='external nofollow' class='url'>Hayes</a> on <a href="http://www.8bitrocket.com/2012/02/03/atari-vets-getting-the-band-back-together-to-rock-mobile-games-likes-its-1979-all-over-again/#comment-4749">Atari Vets “Getting The Band Back Together” To Rock Mobile Games Like’s It’s 1979 All Over Again</a></li><li class="recentcomments"><a onclick="javascript:pageTracker._trackPageview('/outgoing/commercialloan-rates.com/');" href='http://commercialloan-rates.com/' rel='external nofollow' class='url'>Mortgage loan rates</a> on <a href="http://www.8bitrocket.com/2010/09/17/top-10-game-prediction-for-2010-2011/#comment-4747">Top-10 Game Predictions for 2010-2011</a></li><li class="recentcomments"><a onclick="javascript:pageTracker._trackPageview('/outgoing/commercialloan-rates.com/');" href='http://commercialloan-rates.com/' rel='external nofollow' class='url'>Mortgage loan rates</a> on <a href="http://www.8bitrocket.com/2010/05/15/html-5-canvas-creating-gaudy-text-animations-just-like-flash-sort-of/#comment-4746">HTML 5 Canvas: Creating Gaudy Text Animations…Just Like Flash! (sort of)</a></li><li class="recentcomments"><a onclick="javascript:pageTracker._trackPageview('/outgoing/www.smsblaze.com/');" href='http://www.smsblaze.com/' rel='external nofollow' class='url'>Hindi Sms</a> on <a href="http://www.8bitrocket.com/2012/02/03/atari-vets-getting-the-band-back-together-to-rock-mobile-games-likes-its-1979-all-over-again/#comment-4745">Atari Vets “Getting The Band Back Together” To Rock Mobile Games Like’s It’s 1979 All Over Again</a></li></ul></li><li id="calendar-3" class="widget-container widget_calendar"><h3 class="widget-title"> </h3><div id="calendar_wrap"><table id="wp-calendar"> <caption>April 2010</caption> <thead> <tr> <th scope="col" title="Monday">M</th> <th scope="col" title="Tuesday">T</th> <th scope="col" title="Wednesday">W</th> <th scope="col" title="Thursday">T</th> <th scope="col" title="Friday">F</th> <th scope="col" title="Saturday">S</th> <th scope="col" title="Sunday">S</th> </tr> </thead> <tfoot> <tr> <td colspan="3" id="prev"><a href="http://www.8bitrocket.com/2010/03/" title="View posts for March 2010">« Mar</a></td> <td class="pad"> </td> <td colspan="3" id="next"><a href="http://www.8bitrocket.com/2010/05/" title="View posts for May 2010">May »</a></td> </tr> </tfoot> <tbody> <tr> <td colspan="3" class="pad"> </td><td><a href="http://www.8bitrocket.com/2010/04/01/" title="8bitrocket Aprils Fools Interweb Mashup: April 1, 2010">1</a></td><td><a href="http://www.8bitrocket.com/2010/04/02/" title="The iPad Is Here and Guess What?: A Lot Of People Think It Sucks : Updated, Easter 2010 Bunny Battle (2010), Easter 2010 Bunny Catch (2010)">2</a></td><td><a href="http://www.8bitrocket.com/2010/04/03/" title="Essential Guide To Flash Games Code Supplement #3: New Source For Chapters 11 and 12">3</a></td><td><a href="http://www.8bitrocket.com/2010/04/04/" title="Iterating Essential Guide To Flash Games Ch. 1 Games For A Weekend Easter Project">4</a></td> </tr> <tr> <td><a href="http://www.8bitrocket.com/2010/04/05/" title="Using the Essential Flash Games Framework Hint #1: The mochi package, Using the Essential Flash Games Framework Hint #2: Mochi Ads and the IDE">5</a></td><td><a href="http://www.8bitrocket.com/2010/04/06/" title="Don’t Trash Flash Just Yet: iPad Backlash Includes Realization That Flash Web Games Won’t Work (well duh!)">6</a></td><td>7</td><td><a href="http://www.8bitrocket.com/2010/04/08/" title="8bitrocket Interviews with Jameson Hsu from Mochi Media, Apple Announces iAd, Game Center For iPhone/iTouch/iPad Apps: Flash Game Developers Should Take Notice">8</a></td><td><a href="http://www.8bitrocket.com/2010/04/09/" title="Apple Hates Developers, And We Feel Hated, 10 Things Developers Can Do To Help Fight Apple’s Grip On the Future Of Software Development">9</a></td><td><a href="http://www.8bitrocket.com/2010/04/10/" title="Top 10 Positive Things (for me) About The Apple iPhone Developer Clampdown">10</a></td><td><a href="http://www.8bitrocket.com/2010/04/11/" title="Exploring The HTML 5 Canvas For Flash Developers #2: Tracking The Mouse To Draw On The Screen">11</a></td> </tr> <tr> <td><a href="http://www.8bitrocket.com/2010/04/12/" title="Tutorial: Exploring the AS3 Bitmap Class Lesson 1 – Creating a basic dynamic tile sheet.">12</a></td><td>13</td><td><a href="http://www.8bitrocket.com/2010/04/14/" title="Try Out The 10 Games From Our book, Awesome Content Aware Fill Function in Photoshop CS5, Tutorial: Exploring the AS3 Bitmap Class Lesson 2 – Rotation with and without a Matrix">14</a></td><td>15</td><td><a href="http://www.8bitrocket.com/2010/04/16/" title="Js-Kit Echo Testing New Comments System Please Help: Update: Buggy As All Hell, Disqus Testing : Please Help By Posting A comment, Ning Is No More, Please join Us On Disqus, Integrated Into The site">16</a></td><td><a href="http://www.8bitrocket.com/2010/04/17/" title="Ace The Super Villain’s Alloy Tengu 2 DX Featured on the Yo Yo Games Site">17</a></td><td><a href="http://www.8bitrocket.com/2010/04/18/" title="Jeff at DRUPALCON Monday">18</a></td> </tr> <tr> <td><a href="http://www.8bitrocket.com/2010/04/19/" title="Spectacularly Nerdy 8bitrocket Computer Desk Circa 1992">19</a></td><td>20</td><td><a href="http://www.8bitrocket.com/2010/04/21/" title="Nolan Bushnell once again is part of Atari!, “Gaming After 40″ Blog Hits The 8bitrocket.com Sweet Spot">21</a></td><td><a href="http://www.8bitrocket.com/2010/04/22/" title="For Flash Games Developers, Working With the HTML 5 Canvas Is A Lot Of “Roll Your Own”">22</a></td><td><a href="http://www.8bitrocket.com/2010/04/23/" title="8-bit YouTube Retro Video Interweb-Mashup, Game Engine Re-Use: Jeff Vogel Is My Hero">23</a></td><td>24</td><td>25</td> </tr> <tr> <td><a href="http://www.8bitrocket.com/2010/04/26/" title="No Flash On The iPad Problem: Current Popular Social Games, The Myth Making Of Nolan Bushnell: The Malcolm McLaren Of Video Games? Updated:, No More Printed Game Manuals For “The Environment”, or “Pay Twice For What You Used To Get For Free”">26</a></td><td>27</td><td><a href="http://www.8bitrocket.com/2010/04/28/" title="Retro Scan: Original Atari ST Action Review – Dungeon Master, Gaming After 40′s Video Podcast Is Exceptionally Retrotastic">28</a></td><td><a href="http://www.8bitrocket.com/2010/04/29/" title="Steve Jobs Vomits His Own Useless Drivel About Flash. Yawn, Atari History Orgasm Hits AtariAge.com Forums As Nolan Bushnell Shows Up to Defend Himself, Terry Paton Gives Our book A Nice Review!">29</a></td><td><a href="http://www.8bitrocket.com/2010/04/30/" title="The Essential guide To Flash Games: Facebook Page: Please “Like It”">30</a></td> <td class="pad" colspan="2"> </td> </tr> </tbody> </table></div></li><li id="tag_cloud-3" class="widget-container widget_tag_cloud"><h3 class="widget-title">Tags</h3><div class="tagcloud"><a href='http://www.8bitrocket.com/tag/3ds/' class='tag-link-116' title='1 topic' style='font-size: 8pt;'>3ds</a> <a href='http://www.8bitrocket.com/tag/7800/' class='tag-link-108' title='1 topic' style='font-size: 8pt;'>7800</a> <a href='http://www.8bitrocket.com/tag/adobe/' class='tag-link-117' title='1 topic' style='font-size: 8pt;'>adobe</a> <a href='http://www.8bitrocket.com/tag/android/' class='tag-link-75' title='1 topic' style='font-size: 8pt;'>android</a> <a href='http://www.8bitrocket.com/tag/april-1st/' class='tag-link-138' title='1 topic' style='font-size: 8pt;'>April 1st</a> <a href='http://www.8bitrocket.com/tag/asteroids/' class='tag-link-32' title='1 topic' style='font-size: 8pt;'>asteroids</a> <a href='http://www.8bitrocket.com/tag/atari/' class='tag-link-53' title='4 topics' style='font-size: 22pt;'>Atari</a> <a href='http://www.8bitrocket.com/tag/books/' class='tag-link-109' title='1 topic' style='font-size: 8pt;'>books</a> <a href='http://www.8bitrocket.com/tag/canavs/' class='tag-link-113' title='1 topic' style='font-size: 8pt;'>canavs</a> <a href='http://www.8bitrocket.com/tag/canvas/' class='tag-link-60' title='1 topic' style='font-size: 8pt;'>canvas</a> <a href='http://www.8bitrocket.com/tag/chrome/' class='tag-link-105' title='1 topic' style='font-size: 8pt;'>chrome</a> <a href='http://www.8bitrocket.com/tag/contest/' class='tag-link-76' title='2 topics' style='font-size: 14.3pt;'>contest</a> <a href='http://www.8bitrocket.com/tag/cs5/' class='tag-link-120' title='1 topic' style='font-size: 8pt;'>CS5</a> <a href='http://www.8bitrocket.com/tag/dice/' class='tag-link-82' title='1 topic' style='font-size: 8pt;'>dice</a> <a href='http://www.8bitrocket.com/tag/electronic-games-magazine/' class='tag-link-159' title='1 topic' style='font-size: 8pt;'>Electronic Games Magazine</a> <a href='http://www.8bitrocket.com/tag/electrotank/' class='tag-link-110' title='1 topic' style='font-size: 8pt;'>electrotank</a> <a href='http://www.8bitrocket.com/tag/flash/' class='tag-link-50' title='4 topics' style='font-size: 22pt;'>flash</a> <a href='http://www.8bitrocket.com/tag/flash-games-2/' class='tag-link-94' title='2 topics' style='font-size: 14.3pt;'>flash games</a> <a href='http://www.8bitrocket.com/tag/gallery/' class='tag-link-125' title='1 topic' style='font-size: 8pt;'>Gallery</a> <a href='http://www.8bitrocket.com/tag/game/' class='tag-link-29' title='1 topic' style='font-size: 8pt;'>game</a> <a href='http://www.8bitrocket.com/tag/games-2/' class='tag-link-81' title='4 topics' style='font-size: 22pt;'>games</a> <a href='http://www.8bitrocket.com/tag/google/' class='tag-link-104' title='1 topic' style='font-size: 8pt;'>google</a> <a href='http://www.8bitrocket.com/tag/html5/' class='tag-link-61' title='3 topics' style='font-size: 18.5pt;'>html5</a> <a href='http://www.8bitrocket.com/tag/ie9/' class='tag-link-112' title='1 topic' style='font-size: 8pt;'>ie9</a> <a href='http://www.8bitrocket.com/tag/interview/' class='tag-link-97' title='1 topic' style='font-size: 8pt;'>interview</a> <a href='http://www.8bitrocket.com/tag/iphone/' class='tag-link-121' title='1 topic' style='font-size: 8pt;'>iphone</a> <a href='http://www.8bitrocket.com/tag/kids-games/' class='tag-link-80' title='1 topic' style='font-size: 8pt;'>kids games</a> <a href='http://www.8bitrocket.com/tag/magazines/' class='tag-link-111' title='1 topic' style='font-size: 8pt;'>magazines</a> <a href='http://www.8bitrocket.com/tag/mochi/' class='tag-link-77' title='3 topics' style='font-size: 18.5pt;'>mochi</a> <a href='http://www.8bitrocket.com/tag/moraff/' class='tag-link-119' title='1 topic' style='font-size: 8pt;'>moraff</a> <a href='http://www.8bitrocket.com/tag/pc-games/' class='tag-link-118' title='1 topic' style='font-size: 8pt;'>pc games</a> <a href='http://www.8bitrocket.com/tag/pixel/' class='tag-link-33' title='1 topic' style='font-size: 8pt;'>pixel</a> <a href='http://www.8bitrocket.com/tag/portals/' class='tag-link-107' title='2 topics' style='font-size: 14.3pt;'>portals</a> <a href='http://www.8bitrocket.com/tag/resize/' class='tag-link-98' title='1 topic' style='font-size: 8pt;'>resize</a> <a href='http://www.8bitrocket.com/tag/retro/' class='tag-link-31' title='2 topics' style='font-size: 14.3pt;'>retro</a> <a href='http://www.8bitrocket.com/tag/review/' class='tag-link-95' title='2 topics' style='font-size: 14.3pt;'>review</a> <a href='http://www.8bitrocket.com/tag/shooter-2/' class='tag-link-54' title='1 topic' style='font-size: 8pt;'>shooter</a> <a href='http://www.8bitrocket.com/tag/silverlight-2/' class='tag-link-79' title='2 topics' style='font-size: 14.3pt;'>silverlight</a> <a href='http://www.8bitrocket.com/tag/space-gate/' class='tag-link-100' title='1 topic' style='font-size: 8pt;'>space gate</a> <a href='http://www.8bitrocket.com/tag/spil/' class='tag-link-106' title='1 topic' style='font-size: 8pt;'>SPIL</a> <a href='http://www.8bitrocket.com/tag/start-wars/' class='tag-link-96' title='1 topic' style='font-size: 8pt;'>start wars</a> <a href='http://www.8bitrocket.com/tag/tron/' class='tag-link-83' title='1 topic' style='font-size: 8pt;'>Tron</a> <a href='http://www.8bitrocket.com/tag/tutorial-pathing/' class='tag-link-99' title='1 topic' style='font-size: 8pt;'>tutorial. pathing</a> <a href='http://www.8bitrocket.com/tag/video-games/' class='tag-link-114' title='1 topic' style='font-size: 8pt;'>video games</a> <a href='http://www.8bitrocket.com/tag/wii/' class='tag-link-115' title='1 topic' style='font-size: 8pt;'>wii</a></div> </li><li id="linkcat-45" class="widget-container widget_links"><h3 class="widget-title">Flash Game Blogs</h3> <ul class='xoxo blogroll'> <li><a href="http://www.flashenabledblog.com" rel="colleague" target="_blank">Flash Enabled</a></li> <li><a href="http://www.flashfocus.nl" target="_blank">Flash Focus</a></li> <li><a href="http://www.flashgameblogs.com" rel="colleague" target="_blank">Flash Game blogs</a></li> <li><a href="http://blog.gamingyourway.com/" rel="colleague" target="_blank">Gaming Your Way</a></li> <li><a href="http://blog.ickydime.com/" target="_blank">Icky Dime</a></li> <li><a href="http://www.photonstorm.com" target="_blank">Photon Storm</a></li> <li><a href="http://www.untoldentertainment.com/blog/category/blog" target="_blank">Untold Entertainment</a></li> </ul> </li> <li id="linkcat-44" class="widget-container widget_links"><h3 class="widget-title">Flash Game Resources</h3> <ul class='xoxo blogroll'> <li><a href="http://flashgamedistribution.com" rel="colleague" target="_blank">Flash Game Distribution</a></li> <li><a href="http://www.flashgamelicense.com" rel="colleague" target="_blank">Flash Game License</a></li> <li><a href="http://www.mochiland.com" rel="colleague" target="_blank">Mochiland</a></li> </ul> </li> <li id="linkcat-90" class="widget-container widget_links"><h3 class="widget-title">PC, Console and Retro Games</h3> <ul class='xoxo blogroll'> <li><a href="http://www.gamehoot.com/" rel="colleague" title="Top Games, game news, game accessories" target="_blank">Game Hoot</a></li> </ul> </li> </ul> </div> </div> <div id="footer"> <div id="colophon"> <div align="center"><script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div><table id='ttw_ftable'><tr> <td id='ttw_ftdl'><div id="site-info"> © 2012 - <a href="http://www.8bitrocket.com/" title="8bitrocket" rel="home">8bitrocket</a> </div></td> <td id='ttw_ftdr'><div id="site-generator"> <a href="http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">Proudly powered by WordPress.</a> 2010 Weaver by WPWeaver.info </div></td> </tr></table> </div> </div> </div>  <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-b7Bsx76cYflS2";quantserve();</script> <noscript> <a href="http://www.quantcast.com/p-b7Bsx76cYflS2" target="_blank"><img src="http://pixel.quantserve.com/pixel/p-b7Bsx76cYflS2.gif" style="display: none;" border="0" height="1" width="1" alt="Quantcast"/></a> </noscript> <script type='text/javascript' src='http://platform.twitter.com/widgets.js?ver=23'></script> <script type='text/javascript' src='http://platform.linkedin.com/in.js?ver=23'></script> <script type='text/javascript' src='http://www.8bitrocket.com/wp-content/plugins/socialize/frontend/js/plusone.js?ver=23'></script>  <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-1559757-2"); pageTracker._initData(); pageTracker._trackPageview(); </script> <script type='text/javascript' src='http://s.gravatar.com/js/gprofiles.js?aa&ver=836'></script> <script type='text/javascript'> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type='text/javascript' src='http://www.8bitrocket.com/wp-content/plugins/jetpack/modules/wpgroho.js?ver=836'></script> <div style="display:none"> </div> <script type='text/javascript' src='http://www.8bitrocket.com/wp-content/plugins/jetpack/modules/sharedaddy/sharing.js?ver=0.1'></script> <div id="sharing_email" style="display: none;"> <form action="" method="post"> <label for="target_email">Send to Email Address</label> <input type="text" name="target_email" id="target_email" value="" /> <label for="source_name">Your Name</label> <input type="text" name="source_name" id="source_name" value="" /> <label for="source_email">Your Email Address</label> <input type="text" name="source_email" id="source_email" value="" /> <img style="float: right; display: none" class="loading" src="http://www.8bitrocket.com/wp-content/plugins/jetpack/modules/sharedaddy/images/loading.gif" alt="loading" width="16" height="16" /> <input type="submit" value="Send Email" class="sharing_send" /> <a href="#cancel" class="sharing_cancel">Cancel</a> <div class="errors errors-1" style="display: none;"> Post was not sent - check your email addresses! </div> <div class="errors errors-2" style="display: none;"> Email check failed, please try again </div> <div class="errors errors-3" style="display: none;"> Sorry, your blog cannot share posts by email. </div> </form> </div> <script src="http://stats.wordpress.com/e-201205.js" type="text/javascript"></script> <script type="text/javascript"> st_go({v:'ext',j:'1:1.2.2',blog:'14803170',post:'4372'}); var load_cmc = function(){linktracker_init(14803170,4372,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script></body> </html>