HTML5 Canvas Source Example HTML
The main landing page will need to check for local storage to be supported on page load as well as initialize the puzzle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Anime Art Puzzles</title> <!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="scripts/gamelogic.js"></script> <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="styles/puzzleTheme.css" /> <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" /> <link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96" /> <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" /> <script> $(document).ready(function() { init(document); // localStorage feature detection if (isLocalStorageSupported()) { // local storage is supported document.getElementById("savePuzzleButton"); document.getElementById("loadPuzzleButton"); } else { } }); window.addEventListener("resize", myFunction); function myFunction() { adjustOffset(); } /* * Tests if local storage is supported in the browser. * * Returns: * True if local storage is supported, false if not. */ function isLocalStorageSupported() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } } </script> </head> <body> <div id="titleDiv"> <h1 id="title"> <a href="http://www.artinapplications.com/" target="_blank">MobileApplications009 Art Puzzles</a> </h1> </div> <div id="puzzleCanvasDiv"> <canvas id="puzzleCanvas" width="720" height="450"></canvas> </div> <div id="buttonDiv"> <button type="button" id="nextImageButton">Next Image</button> <button type="button" id="changeDifficultyButton">Change Difficulty</button> <button type="button" id="savePuzzleButton">Save Puzzle</button> <button type="button" id="loadPuzzleButton">Load Puzzle</button> </div> <div id="androidDiv"> <a href="https://play.google.com/store/apps/details?id=radical.puzzles" target="_blank"><img src="images/app_on_google_play.png" alt="App On Google Play"></a> </div> </body> </html>