Foundation HTML5 Canvas (Free Copies)

Jeffrey Way on Apr 22nd 2011 with 460 comments

Rob Hawkes, author of our popular Canvas from Scratch session recently released his fantastic new book, Foundation HTML5 Canvas. This book is unique in that it introduces the HTML5 canvas element from more of a gaming angle. Even better, we’ve got some free copies to give out!

Learn how to become a true master of HTML5 canvas in my new book. In it, I teach you how to use all the major features of canvas, including how to animate with physics and how to create two awesome space games.
– Rob Hawkes

Get the Book on Amazon

Free Copies

I’m pleased to announce that Rob and Apress have agreed to offer a few free copies to some of our lucky readers! To enter, simply leave a comment below, and write either an HTML5 or Canvas tip. Tweet length (a sentence or two) should do just fine. Next week, we’ll contact a few of you with instructions for downloading your free book!

Page from Foundation HTML5 Canvas

Thanks again to Rob for writing this book. Be sure to pick up a copy if it could be of use to you!

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Jeffrey Way

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

http://zubajw.com zubajw
Use sessionStorage and localStorage in place of cookies!
These two objects can be used to persist user data on the client side for the length of the session or indefinitely.
// if localStorage is present, use that
if ((‘localStorage’ in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = ‘["iPhone 5","HTML5 Book","Foundations of HTML5 Book"]‘;
} else {
// without sessionStorage we’ll have to use a far-future cookie
// with document.cookie’s awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = ‘wishlist=["Unicorn","Narwhal","Deathbear"];’+
‘ expires=’+expires+’; path=/’;
document.cookie = cookiestr;
}

Gautam singh
This is Gautam,web developer from india

Anders
tweet length eh…
simple hack to clear a canvas, resize it to itself : cvs.width = cvs.width;
Ro
Sounds great, hope to win a copy!
-Ro
http://www.intesys.it Marco Moreale
Canvas AND animation ?! Is it possible?! I need that book !!
http://www.rickgrossman-blog.com D. Lukow
Your book provided me with the instruction I needed to create the perfect canvas. Thank you.
http://thijsdezoete.nl Thijs
Canvas tips: Maximize the loop’s effectiveness, by saving calls to functions that don’t need to update that much/often.
patrick91
Cool, thanks for this :)
I use to have a function called draw() that refreshes the canvas and draws everything again, and it’s called every 40 ms :)

http://www.thijsdezoete.nl Thijs
No problem! Good that you like it

Sameeh
Nice Book!
Rob
I don’t know canvas. I’m learning HTML5 at the moment. I don’t have tips or something. Sorry about that, but I need to start somewhere! So, maybe I’m not admissible for the book… If not, someday, somewhere I’m going to read it anyway! ;)
Have a nice day!
Rob
http://www.jacobnijgh.nl Jacob
I was searching this for a long time now……give me one! :D
Almaz
Simply .
I need one for my school project ! Games in can !
Nix
Nice book .. would love to read it. Great job nettuts+ and Rob!!
Ledigitale
Wow this is a nice addition to the already written literature of HTML5. I hope to win a copy. Thank you.
Zebin
Must have Book for a web designer
RamKP
I would like to get a copy because creating games with the canvas API is something I want to do.
Fabrizio Calderan
This is a snippet to make a silhouette of an image using canvas:
https://gist.github.com/951273
The idea is to fill every non-white pixel with a black pixel, so it works well with convexed shapes, like an apple or simple shapes.
Bruno Mateus
I’ve been waiting for a book like this since I’ve learned about what html5 will allow us to do! I’m sure it will be awesome!
Brian
This looks like a very useful book, can’t wait to get it bought or free!
Elliott
Looks like a good read. What’s up with the cover though?
Fabrizio Calderan
My message sent on May 2, 2011 at 12:44 am is still awaiting moderation… :( isn’it suitable for the discussion?
http://presentationplayer.info Ben Cooper
I could really do with this book …. looks a brilliant read
maria callas
it would be beneficial to me to catchon canvas. thanks. i.,
http://www.webleydevelopment.com Matt Webley
erm….
you can call javascript by just using the tag… basic but brilliant!
Makke
Nice book about HTML5 , really would like to get one! ^^
blake
I’d love a free copy – love to paste some comments about canvas, but I’m still learning… hence I need this book :o)
http://askmatthewpotter.com Matthew Potter
A while back I was experimenting with canvas as a means to build variable video without flash in hopes to build an iOS version of it. The downside is that it was fairly processor intensive as well as I didn’t built a play button (because iOS doesn’t autostart video). It is best viewed in Chrome (apparently has crashed my Safari but used to work in it).
The result was a polygon that I was able to overlay via corner pin coordinates from an After Effects output (Mocha tracking -> After Effects corner pin) however would need far more time to develop. The following link has my final proof of concept. It uses the same XML file that Flash does along with the video source.
The variable area is the white part over the screen. Note that it doesn’t have a mask (yet).
http://goo.gl/GxNwy
http://www.knade.com Chris
Can’t wait to receive a Copy!
http://mindroots.in/index.html mindroots
HI
Nice Article About HTML5.Many things to learn abt
THanks for the post
http://mindroots.in/index.html mindroots
HI
Nice Tutorials, Helpful for the beginners
Thanks for the post
http://joanpiedra.com Joan Piedra
Since you are using HTML5 doctype, there is no need to be restricted by XHTML rules like always add a value to an attribute (readonly=”readonly”), or close single tags (, , , ), this helps reduce small bytes in the HTML code that eventually reduces the size of the site overall, improving performance and load speed :)
Looking forward to read a copy of your book!
- Joan.
Naveed Malik
Looks great book…..but still I have not received a free copy :)
Thanks for the offer.
Matteo
Hopefully I will get my hands on this awesome book!
Peter John
HTML 5 this is big!
http://www.webdevgalaxy.com Nick
Add Canvas support for IE by using explorercanvas found here: http://code.google.com/p/explorercanvas/
Bernard
Would love to get a copy of it, so i can be convinced to stop using DOM objects for my game development!

NiftyT
Excellent.

http://www.xoen.org Aldo “xoen” Giambelluca
I really enjoyed to play with Pascal graphic routines, I hope to win a copy because I would like to keep playing in HTML5 too ;)
Bill
I may be a little late to the party but would love to get a copy of this!
http://www.matter.at Göran
Set up a solid HTML5 base for your projects with HTML5 Boilerplate and create cross-browser compatible websites. If you want to target smartphone mobile devices use it together with 1140px grid!
Tyrone Moodley
I would like to get a copy of the book. Thanks
http://arnolem.developpez.com Arnaud
I could really make a review of this book …. looks a brilliant read
tea_clipper
Hi,
Its nice to have one of this book…still available?…………….wheew..
http://adamperlistv.com Adam
Thanks for the amazing HTML5 freebie. Looking forward to reading the book.
DeMarcco
Article caught my attention, I like a copy too!
Suresh
HTML5 looks promising. Hope to get a copy.