Scribd Logo
Upload

Welcome to Scribd!

  • Canvas

    Uploaded by

    Nii Okai Quaye
    14 views16 pages

    Original Title

    Lab

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    ODP, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as ODP, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views16 pages

    Canvas

    Uploaded by

    Nii Okai Quaye

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as ODP, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Canvas

    function supports_canvas_text() { if (!supports_canvas()) { return false; } var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d'); return typeof context.fillText == 'function'; }

    Canvas
    function supports_canvas_text() { If (!supports_canvas()) { return false; } var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d'); return typeof context.fillText == 'function'; }

    if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( }

    Canvas Text

    function supports_canvas_text() { if (!supports_canvas()) { return false; } var dummy_canvas = document.createElement('canvas'); var context = dummy_canvas.getContext('2d'); return typeof context.fillText == 'function'; }

    if (Modernizr.canvastext) { // let's draw some text! } else { // no native canvas text support available :( }

    Video

    function supports_video() { return !!document.createElement('video').canPlayType; }

    if (Modernizr.video) // let's play some } else { // no native video // maybe check for }

    Local Storage
    function supports_local_storage() { return ('localStorage' in window) && window['localStorage'] !== null;

    if (Modernizr.localstorage) { // window.localStorage is available! } else { // no native support for local storage :( // maybe try Gears or another third-party solution }

    Web workers

    function supports_web_workers() { return !!window.Worker; }

    if (Modernizr.webworkers) { // window.Worker is available! } else { // no native support for web workers :( // maybe try Gears or another third-party solution }

    Offline Web Applications

    function supports_offline() { return !!window.applicationCache; }

    if (Modernizr.applicationcache) { // window.applicationCache is available! } else { // no native support for offline :( // maybe try Gears or another third-party solution }

    Content

    The <canvas> element The <video> element <input> types The <input placeholder> attribute The <input autofocus> attribute HTML5 Storage Web workers Offline web applications The geolocation API

    Geolocation

    function supports_geolocation() { return !!navigator.geolocation; }

    if (Modernizr.geolocation) { // let's find out where you are! } else { // no native geolocation support available :( // maybe try Gears or another third-party solution }

    Input Types

    var i = document.createElement("input"); i.setAtt ribute(type,color);

    return i.type !==text

    if (!Modernizr.inputtypes.date) { // no native support for <input type="date"> :( // maybe build one yourself with // Dojo // or jQueryUI }

    Placeholder text

    function supports_input_placeholder() { var i = document.createElement('input'); return 'placeholder' in i; }

    if (Modernizr.input.placeholder) { // your placeholder text should already be visible! } else { // no placeholder support :( // fall back to a scripted solution }

    Video Format Support

    Apple propriety support function supports_h264_baseline_video() { if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); }

    Mozila, Chrome Open source function supports_ogg_theora_video() { if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/ogg; codecs="theora, vorbis"'); }

    Blog Example

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive into HTML5</title> <script src="modernizr.min.js"></script> </head> <body> ... </body> </html>

    article

    <article> <header> <time datetime="2009-10-22" pubdate>October 22, 2009</time> <h1> <a href="#"rel="bookmark"title="link to this post">Travel day </a> </h1> </header> <p>Lorem ipsum dolor sit amet...</p>

    </article>

    nav
    Previous

    Now

    <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>

    <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav>

    Geolocation

    navigator.geolocation.getCurrentPosition(geo_callback, error_handler) Function geo_callback(position){ var long = position.coord.longitude var lat = position.coord.lat }

    Function error_handler(err){ switch(err.code){ case 1 : //PERMISSION_DENIED case 2: //POSITION_UNAVAILABLE case 3: //TIMEOUT case 0: //UNKNOWN_EROR } }

    Navigator.geolocation.getCurrentPosition(call_back1,err_callback,{positionOptions:value}) enableHighAccuracy, timeout, maximumAge

    geo.gs opensource geolocation lib <http://code.google.com/p/geo-location-javascript/>

    You might also like