Use HTML5 for Killer Cross-Platform Graphics

By Gordon Smith

PrezzieFrames screenshot We’re pleased to announce the launch of a graphically intensive site developed in HTML5 using the Canvas technologies.

PrezzieFrames is a site offering customers the ability to customize a photo which is delivered anywhere in the world in a top-quality silver presentation frame. On the surface, the idea is simple – a user can upload a photo from their phone or computer, and this is placed in a virtual frame. The user can then manipulate the photo in a number of ways:

  • move the photo;
  • rotate;
  • zoom;

Users can also add text to the photo image and choose fonts and colours for the photo. The aim of the user interface is to ensure the user is guided intuitively through the process at every stage, using skills they already have (point, zoom, rotate). Under the hood, some complex JavaScript and HTML5 Canvas coding has been developed, to allow the manipulation and saving of the image from the screen to a JPEG file of high enough quality to be printed and delivered within the presentation frame. We used the fantastic Kinetic JS engine to deal with complex image manipulation routines.