HTML5: Diving into the Canvas Tag

HTML5 has grown dramatically over the last few years. One of its new elements, the canvas tag, is a mystery to most front-end developers. The HTML5 canvas tag is an easy and powerful way to draw graphics using JavaScript. It allows for dynamic rending of 2D shapes and bitmap images. Some uses for canvas include building graphics, animations, and yes - even games!

The canvas consists of a drawable region defined in HTML by height and width attributes. JavaScript exposes a full set of drawing functions similar to those of other common 2D APIs (and even 3D, now!).

We'll begin by giving you a high level overview of what the Canvas is and how it works. Following that, we'll dive in and look at some fundamental uses of Canvas, and even explore some of the most innovative uses of it today.

The class will cover:

· The basic concepts of the HTML5 canvas

· Fundamental drawing techniques

· Popular frameworks to expedite your work

· Exceptional uses of canvas

· The future of the canvas

The first half of the experience will cover how the canvas is used, and then we'll follow up by getting our hands dirty and creating some examples of our own. Mozilla has provided a great resource for getting started. (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial)

Pizza and soda will be provided and are sponsored by Microsoft.

Prerequisites:

A basic understanding of JavaScript, HTML5, and CSS skills. A computer (not a tablet) will be necessary to follow along and code in real time.

About the teacher:

http://photos3.meetupstatic.com/photos/event/e/0/d/a/600_337317562.jpeg

Dave Voyles is a Tech Evangelist at Microsoft, where he works with students, startups, and professional developers from Philadelphia through DC, to help them deliver their experiences to new audiences. Previously, he worked as a Senior Engineer at Comcast where he was the project lead their Xbox One project, in addition to writing cross platform mobile applications and front ends using HTML5. You can find more at his site here (http://davevoyles.azurewebsites.net/).