examples/drawing.html

<!doctype html>
<html>
    <head>
        <title>sketch.js &raquo; Basic Example</title>
        <link rel="stylesheet" href="css/example.css">
        <style type="text/css">
            html, body {
                background: #F51E50;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <header class="info">
            <hgroup class="about">
                <h1>sketch.js &rsaquo; basic</h1>
                <h2>A minimal example of how to use sketch.js</h2>
                <h3>Start drawing!</h3>
            </hgroup>
            <nav class="more">
                <a href="https://github.com/soulwire/sketch.js/archive/master.zip" target="_blank">Download</a>
                <a href="https://github.com/soulwire/sketch.js" target="_blank">View on Github</a>
            </nav>
        </header>
        <script src="../js/sketch.js"></script>
        <script>

        var COLOURS = [ '#E3EB64', '#A7EBCA', '#FFFFFF', '#D8EBA7', '#868E80' ];
        var radius = 0;

        Sketch.create({

            container: document.getElementById( 'container' ),
            autoclear: false,
            retina: 'auto',

            setup: function() {
                console.log( 'setup' );
            },

            update: function() {
                radius = 2 + abs( sin( this.millis * 0.003 ) * 50 );
            },

            // Event handlers

            keydown: function() {
                if ( this.keys.C ) this.clear();
            },

            // Mouse & touch events are merged, so handling touch events by default
            // and powering sketches using the touches array is recommended for easy
            // scalability. If you only need to handle the mouse / desktop browsers,
            // use the 0th touch element and you get wider device support for free.
            touchmove: function() {

                for ( var i = this.touches.length - 1, touch; i >= 0; i-- ) {

                    touch = this.touches[i];

                    this.lineCap = 'round';
                    this.lineJoin = 'round';
                    this.fillStyle = this.strokeStyle = COLOURS[ i % COLOURS.length ];
                    this.lineWidth = radius;

                    this.beginPath();
                    this.moveTo( touch.ox, touch.oy );
                    this.lineTo( touch.x, touch.y );
                    this.stroke();
                }
            }
        });
        
        </script>
    </body>
</html>