Monthly Archives: May 2013

Introduction to HTML5 Canvas

Posted by on May 20, 2013 Comments Off on Introduction to HTML5 Canvas

canvas_sun_orangeMaybe you’ve heard of the HTML 5 Canvas API, but don’t know what it’s good for…?  Maybe you’ve heard that it’s the way to go if you want to code an HTML5 game? Or maybe you’ve heard that it gives you explicit control over drawing in your browser? So what does all that mean?… Just what is the HTML5 Canvas API?

Let me pull back the curtain a little for you and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps.

In this article, I’m going to give an introductory overview of the HTML5 Canvas API.  The sample application that comes with this article, “Canvas Playground”, gives a number of canvas drawing examples and even lets you interactively play around with the Canvas API. Give it a try.

Read more »

Complex Animations Using HTML5 Canvas

Posted by on May 13, 2013 Comments Off on Complex Animations Using HTML5 Canvas

In my upcoming ebook, “Essential Canvas for HTML5“, you’ll not only learn the basics of animation but you’ll also learn how to do complex Flash-like animations using HTML5 and Javascript that impart dynamics through tweening and other advanced techniques. I’ll break it all down for you and walk you through the source code. Here is just one of the samples that come with the book.

Read more »

How You Can Build an HTML5 Photobooth App

Posted by on May 7, 2013 Comments Off on How You Can Build an HTML5 Photobooth App

photo-booth

You want the users of your web app to be able to use their webcam to take their own profile shots and you’d like them to be able to personalize or stylize the picture before uploading it your weberver. Or maybe you’ve seen one of those fun photobooth-type apps that takes photos, applies cool image effects to them and lets you share them… wondering how they worked.

Imagine if your HTML5 app could programmatically access your webcam, take snapshots and modify the image data procedurally. You could then let your user’s upload or share their self portraits.

In this article, I’m going to teach you how to do that and more. Building on some articles that I’ve shared in the past, I’ll walk you through a sample application that displays the video from your webcam, applies image processing effects to that video, lets you take still snapshots of the filtered video and lets you serialize the snapshots so that they can be uploaded to a web server.

Read more »