Export canvas drawing to image

Often you would like to export or save image generated on canvas.

here is simple script which does exactly the same.

to get string output to save image you can use stringOutput.

If you run following script you might get following error

Uncaught Error: SECURITY_ERR: DOM Exception 18

As browser can’t set cookies on file://, to run successfully you have to host file on web server.
var c = document.getElementById("sketch"); var dataString = c.toDataURL("image/png"); var index = dataString.indexOf( "," )+1; var stringOutput = dataString.substring( index ); window.open(dataString);

Debuggin html5 offline application

There are amazing features of html5 and one of them is offline application using creating manifest file.
using manifest attribute in html tag makes your web page accessible offline.

 <html manifest="cache.manifest">
 </html>

content of cache.manfiest file looks like

CACHE MANIFEST
# rev 2.0

CACHE:
html5_appcache.html
image.jpg

NETWORK:
*

FALLBACK
/index.html /offline.html

where all resource under cache will get cache locally and served locally when application is offline and all resources under network will require internet connection when they requested by browser.
According to above example the resource html file and jpg file will get cached and served offline.This is great feature however the pain is to debug the offline application.

I have found one article from here http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

which create and binds events on each applicationCache object and writing in log file which goes like as below.
By putting following code in debugging mode you can easily find out what is going on with offline resource and how they get requested on offline mode.

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);setInterval(function(){cache.update()}, 10000);

there are other resource you can follow to gain more understanding about accessing html5 website offline
here are:
http://diveintohtml5.info/offline.html
http://www.w3schools.com/html/html5_app_cache.asp
Manifest file validator
Manifest file validator
Hope you find this post useful. Happy blogging.

Awesome wordpress ecommerce themes

Bootstrap is amazing font end framework with list of css and javascripts which allows designer to design amazing website with ease. During my previous project I was looking for boostrap based e-commerce templates which might suite for wordpress templates as well. Following templates which I fond really easy and to start with. You might think the same.