Twitter Call us on +44 (0)1256 486557

Sencha HTML5 canvas

With HTML5 being an all encompassing term it’s often difficult to know where to start when creating a web-application. Unless you know the complete set of tools available to you it’s impossible to leverage HTML5 to its full potential. If you’re planning to use Sencha to build your web app we’ve highlighted a few powerful HTML5 APIs that you may not be aware of already.

Sencha HTML5 Camera

As a result of the free open-source project known as WebRTC, it is now possible to access the device’s Camera via a simple API call. Although strictly not a bonafide Javascript API it provides an easy way to access the camera for interaction with web-pages via an input element with the type attribute set to file. If you wish you can add an accept attribute that will tell the browser which files to accept.

In the following example the user will be allowed to click a button, take a picture of themselves and share it directly with the web page:

<input type=”file” id=”take picture” accept=”image/*”>

Sencha HTML5 Canvas

You are no longer required to use plugins to create animations and games in the browser as it is now possible using HTML, using an HTML element and the HTML5 canvas API.

You must first specify the element and its dimensions in the HTML code (shown below) and then everything else requires Javascript to work its magic:

<canvas id=”new-canvas” width=”250” height=”250”>This is a canvas</canvas>

The following is a stunning example of animations in HTML being used to full effect:

http://www.creativesandbox.com/guidebook

Are you intending to use Sencha’s frameworks for your app? ProWeb can give advice about using Sencha HTML5 canvas or Sencha HTML5 camera. Call ProWeb’s UK HTML5 developers and HTML5 experts on +441189 353 339 or email hello@prowebsoftware.net.