Getting started with HTML5 canvas

YHTML?

The idea of looking at HTML programming came from watching my little 3-year-old playing on the iPad and wanting to make something he could play with and learn from. Although the target platform is iPad (and maybe iPhone) I’d prefer to iterate on PC which means I need a common technology to reuse between the two. As we all know, native iOS development requires a Mac, iPhone developer program membership and the time to learn and use Xcode – I know I haven’t really got the money for the first two and the patience for the third. If I was responsible for planning the iOS Safari roadmap, I’d have told everyone to implement WebGL for me so that I can stick with the 3D I know, but since they’re not mine to command, I’m going to have to go for a 2D solution.

Looking at the HTML5 tutorials, I like the look of the canvas element over the option of programming HTML that changes dynamically. I’ve not programmed HTML since University which would have been HTML4 or some such over 11 years ago. However targeting canvas means that once the HTML is written, the rest of it is just code. Well… by code I mean JavaScript code which is a language that I’ve not worked with before! That said, I’ve only heard good things about it and some of the things you can do with it amaze me!

Getting started

The first step was to create the HTML to encapsulate the canvas. Looking at the specification for canvas, you need to specify a pixel size for the canvas but with an onload script, you can update the size to what you want. My main aim is to develop something that maximizes the available space on the screen I’m working with, either on the PC or the iPad, so a fixed size isn’t a great place to start and I spent a lot of time looking for a solution (the one I found is in the resources list below).

Here’s the first working attempt, with the main features I wanted to demonstrate:

  • Minimal HTML5 page with a canvas and JavaScript code to draw to it.
  • Supports resize and orientation changing on PC and iOS (please run it on your iPad/Phone and rotate!).
  • Provides a 1:1 area for the application.

Long term plans

Looking forward to future areas for research, there’s several things I want to look at:

  • Find a good editor. I’m using Notepad++ but I typically write basic .txt files in it and not HTML or JavaScript, so I’d like something easier, or maybe just more familiar, but opening Visual Studio makes me feel like I’m using a tactical nuclear strike to crack this nut. That said, VS is my current go-to tool for editing since it’s what I use day-to-day. Something with VS’s text editing but better intellisense would be perfect.
  • Make some reusable modules, containing common code and reusable toys for future development.
  • Performance. I did read an article about poor performance with canvas on iPad, due to the number of pixels to fill but I can’t find the link any more. I can find a lot of pages discussing performance problems Safari versus everything else and timing graphs. First thing to do: write something to check frame rate.
  • Touch input. This is something to try and get working early since it makes a really good interface for experimentation. It’s going to be a pain that iteration will need to be on an iOS target for me, but the improved iteration time with Dropbox should help. And on a related note, I want to look at joystick input too.
  • Audio. This is a whole area of HTML5 and possible compatibility problems that I need to research to add depth to the applications I want to write.
  • CSS (Cascading Style Sheets). Most of the style related stuff that is required for the full screen behaviour is currently implemented in script so I’m not sure if I need CSS.
  • Creating a HTML5 application that you can download to your iPhone. Hopefully that will also allow me to use the full screen, rather than bordered within a browser.

Resources

Most of what I’ve achieved has been thanks to the wealth of tutorials on all the aspects of the canvas tag, HTML5 and most of all JavaScript. Here’s a list of all of the resources  I used:

Advertisements

2 responses to “Getting started with HTML5 canvas

  1. Pingback: Interim Update | dickyjim

  2. Pingback: HTML5 and JavaScript Continued – New Dev Environment & Animation | dickyjim

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s