Sketch Project

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <title>SketchPad</title>

        <style>

            .centre {
                margin: 5px auto;
                width: 450px;
                text-align: center;
            }

            .selectors a {
                border: 1px solid black;
                border-radius: 4px;
                height: 30px;
                line-height: 30px;
                padding: 0 10px;
                vertical-align: middle;
                text-decoration: none;
                display: inline-block;
                color: black;
                font-weight: bold;
            }

            canvas {
                background: #f4f4f4;
                padding-left: 0;
                padding-right: 0;
                margin-left: auto;
                margin-right: auto;
                display: block;
            }

         </style>

    </head>

    <body>

        <div id="sketchpad">

            <div class="tool selectors centre"></div>

            <canvas id="colors_sketch" width="800" height="480">Your browser does not support the HTML5 canvas tag.</canvas>

            <div class="selectors centre">
                <a href="#colors_sketch" data-tool="marker">Marker</a>
                <a href="#colors_sketch" data-tool="eraser">Eraser</a>
                <a href="" data-tool="eraser">Clear</a>
            </div>

        </div>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/sketch.js"></script>

        <script type='text/javascript'>

            $(function() {
                $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
                    $('#sketchpad .tool').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
                });
                $.each([3, 5, 10, 15], function() {
                    $('#sketchpad .tool').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
                });
                $('#colors_sketch').sketch();
            });

            $(window).on("load resize",function(e){
                document.getElementById("colors_sketch").height=$(window).height()-100;
                document.getElementById("colors_sketch").width=$(window).width();
            });

        </script>

    </body>

</html>