CapArea.NET Follow-up: HTML5 Metro apps resources

caparealogoMy thanks to everyone who came out tonight for the Capital Area .NET User Group for my presentation on developing Windows 8 Metro style applications using HTML5 and JavaScript. Great questions and lots of great discussion. Thanks for keeping me on my toes!

As promised, I wanted to share pointers to some additional recorded sessions from BUILD that you may find useful, as well as a link to the sample Canvas Paint app that I used for my demos. If you’re interested in getting the additional tweaks I added to the sample to support persisting the brush color and size, etc. please drop me a note via my contact page, and I will be happy to share it.

Additional Related BUILD Sessions:

and the presentation on which my talk tonight was based:

UPDATE: Nevin House, who attended last night’s talk, got in touch with me via email, and recommended the following two talks on JavaScript, and I heartily agree…both are great talks and are highly recommended for anyone wishing to better understand JavaScript in the context of Metro style apps in Windows 8:

Both presentations feature some of the best presenters from BUILD. Enjoy!

Canvas Paint Sample App

canvasPaintLogo_2The Canvas Paint sample app, along with many other samples and demos, may be downloaded from the Samples area for Windows 8. The direct link to the Canvas Paint sample is:

http://code.msdn.microsoft.com/windowsapps/CanvasPaint-878fa5d5

Note that you can browse the code directly online, or download the sample and run it locally (if you have installed the Windows 8 developer preview).

Exploring HTML5 Canvas: Part 3 – Paths and Text

[This is part 3 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface.]

For part 3 of our exploration of HTML5 Canvas, I’m going to introduce you to a couple of additional ways to draw…the path APIs and the text APIs. Actually, if you’ve read part 2, you already met one of the important path APIs, namely context.arc, which provides the ability to draw circles (or portions of circles). But circles aren’t the only thing we can draw with paths…not by a long shot…

Continue reading Exploring HTML5 Canvas: Part 3 – Paths and Text

Exploring HTML5 Canvas: Part 2 – Basic Shapes

[This is part 2 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code.]

The HTML5 Canvas element holds much promise in terms of making it easier for web developers and designers to create rich animated elements for their sites, without the need for additional browser plug-ins. In this post, we’ll look at the basics of drawing shapes in Canvas, and a little bit about CSS and Canvas.

Continue reading Exploring HTML5 Canvas: Part 2 – Basic Shapes

Exploring HTML5 Canvas: Part 1 – Introduction

In this post, I’m going to begin an examination of one of the hottest new features of HTML5, namely the Canvas element.

What is Canvas, anyway?

The best place to start is at the beginning, and that’s with an explanation of what Canvas actually is. Canvas is a new element that is part of the HTML5 specification, and can be added to your markup as simply as this:

   1: <canvas id="myCanvas" width="500" height="500"></canvas>

OK, we’re done. Let’s go home.

Continue reading Exploring HTML5 Canvas: Part 1 – Introduction

HTML5 Game Camp Resources

I wanted to take a moment to thank all the folks who came out to Columbia University for last Friday’s HTML5 Game Camp event that I presented with my colleague Lindsay Lindstrom. It was great to see so many folks interested in HTML5 and gaming, and in particular how many folks stuck around on a Friday evening to hack some code.

I promised to get my decks uploaded, so here they are:

Continue reading HTML5 Game Camp Resources

Visualizing Layout in HTML5 Canvas with Gridlines

I’m in the process of finalizing my preparations for tomorrow’s HTML5 Game Camp in New York City, and figured I’d share one of the functions I put together to help in the process of visualizing some of the different ways you can draw and manipulate objects on an HTML5 Canvas object. It’s a simple function called renderGrid, which takes as arguments the ID of the canvas you want to draw on, the pixel interval for the gridlines, and the color of the lines, and draws out a grid just like you’d see on graph paper. Call this function before you start drawing objects on your canvas, and you’ll have a nice reference grid to help you more easily visualize the layout. You can customize it to your liking by tweaking the pixel interval, and it’s relatively unobtrusive in your code.

Continue reading Visualizing Layout in HTML5 Canvas with Gridlines