JSFiddle - React, Tailwind, and code Playground

by anurag

HTML

<script src="http://s90818741.onlinehome.us/iscroll.js"></script>
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Canvas Paint - Example 2</title> 
        <style type="text/css"><!--
            #container { position: relative; }
            #imageView { border: 1px solid #000; }
            --></style> 
    </head> 
    <body> 
        <p>Hold down the mouse button to draw in the rectangle below.</p> 
        <div id="container"> 
            <canvas id="imageView" width="400" height="300"> 
                <p>Unfortunately, your browser is currently unsupported by our web 
                    application.  We are sorry for the inconvenience. Please use one of the 
                    supported browsers listed below, or draw the image you want using an 
                    offline tool.</p> 
                <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
                    href="http://www.mozilla.com">Firefox</a>, <a 
                    href="http://www.apple.com/safari">Safari</a>, and <a 
                    href="http://www.konqueror.org">Konqueror</a>.</p> 
            </canvas> 
        </div> 
        
        <script type="text/javascript" src="example2.js"></script> 
        <script type="text/javascript" src="iscroll.js"></script> 
    </body> 
</html>

JavaScript

/* © 2009 ROBO Design
 * http://www.robodesign.ro
 */

this.touchstart = function(ev) {
    this.mousedown(ev);
}
this.touchmove = function(ev) {
    this.mousemove(ev);
}
this.touchend = function(ev) {
    this.mouseup(ev);
}

// Keep everything in anonymous function, called on window load.
if (window.addEventListener) {
    window.addEventListener('load', function() {
        var canvas, context, tool;

        function init() {
            // Find the canvas element.
            canvas = document.getElementById('imageView');
            if (!canvas) {
                alert('Error: I cannot find the canvas element!');
                return;
            }

            if (!canvas.getContext) {
                alert('Error: no canvas.getContext!');
                return;
            }

            // Get the 2D canvas context.
            context = canvas.getContext('2d');
            if (!context) {
                alert('Error: failed to getContext!');
                return;
            }

            // Pencil tool instance.
            tool = new tool_pencil();

            // Attach the mousedown, mousemove and mouseup event listeners.
            canvas.addEventListener('mousedown', ev_canvas, false);
            canvas.addEventListener('mousemove', ev_canvas, false);
            canvas.addEventListener('mouseup', ev_canvas, false);

            // begin: anurag additions
            canvas.addEventListener('touchstart', make_touch_event('touchstart'), false);
            canvas.addEventListener('touchmove', make_touch_event('touchmove'), false);
            canvas.addEventListener('touchend', make_touch_event('touchend'), false);
            // end: anurag additions
        }

        // This painting tool works like a drawing pencil which tracks the mouse 
        // movements.


        function tool_pencil() {
            var tool = this;
            this.started = false;

            // This is called when you start holding down the mouse button.
 ...