a-r-d/paint.html

## paint.html
<html>
    <head>
        <style>
            #canvas1 {
                margin-left: auto;
                margin-right: auto;
                }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script>
        // Drawing: https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
        $(document).ready( function() {
            // This is going to be a plugin so lets hide everything in objects.
            canvMain = '#canvas1';
            drawing = new Object();
            drawing.toggle = false;
            drawing.rectPenSize = 5;
            drawing.circlePenSize = 5;
            drawing.xOffset = $(canvMain).position().left;
            drawing.yOffset = $(canvMain).position().top;

            var width= 700;
            var height= 500;

            // canvas background fill:
            canv1 = document.getElementById("canvas1");
            var rect1 = canv1.getContext("2d");
            rect1.fillStyle="#FFCC33";
            rect1.fillRect(0,0,width,height);

            // start the stroke:
            //strokeTool = canv1.getContext("2d");

            /**** GALLERY ID: '#canvas1' ***/
            $('#canvas1').bind("mousedown.drawing", function(event) {
                var mouseX = event.pageX;
                var mouseY = event.pageY;
                console.log("MOUSEDOWN: mouse @ x=" + mouseX + " y=" + mouseY);
                drawing.toggle = true;
                //strokeTool.beginPath();
            });

            $(document).bind("mousemove.drawing", function(event) {
                var mouseX = event.pageX;
                var mouseY = event.pageY;
                //console.log("MOUSEMOVE: mouse @ x=" + mouseX + " y=" + mouseY);
                if(drawing.toggle == true) {
                    // record mouse position and draw on canvas.
                    console.log("drawing active");
                    drawRect(mouseX, mouseY);
                    }
            });

            //if mouse leaves the element set drawing to false
            $('#canvas1').bind("mouseleave.drawing", function() {
                drawing.toggle = false;
                });


            $('#canvas1').bind("mouseup.drawing", function() {
                if(drawing.toggle == true) {
                    // cancel drawing toggle
                    drawing.toggle = false;
                    }
            });

        });

        function drawRect(mouseX, mouseY) {
            //var canv1 = document.getElementById("canvas1");
            var ctx = canv1.getContext('2d');
            ctx.fillStyle = "#000000";
            ctx.fillRect(mouseX - drawing.xOffset, mouseY - drawing.yOffset, drawing.rectPenSize, drawing.rectPenSize);
            /*strokeTool.moveTo(mouseX - drawing.xOffset,mouseY - drawing.yOffset);
            strokeTool.fill();
            strokeTool.fillStyle = "white";
            */
            console.log("drew on canvas: " + mouseX + "," + mouseY);
            }

        </script>
    </head>

    <body>
        <h1> Canvas test </h1>

        <canvas  id='canvas1' width="700" height="500" style="border:1px solid #c3c3c3;">
            If you can read this your browser is an old piece of crap. Upgrade.
        </canvas>
    </body>
</html>
	<html>
	<head>
	<style>
	#canvas1 {
	margin-left: auto;
	margin-right: auto;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script>
	// Drawing: https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
	$(document).ready( function() {
	// This is going to be a plugin so lets hide everything in objects.
	canvMain = '#canvas1';
	drawing = new Object();
	drawing.toggle = false;
	drawing.rectPenSize = 5;
	drawing.circlePenSize = 5;
	drawing.xOffset = $(canvMain).position().left;
	drawing.yOffset = $(canvMain).position().top;

	var width= 700;
	var height= 500;

	// canvas background fill:
	canv1 = document.getElementById("canvas1");
	var rect1 = canv1.getContext("2d");
	rect1.fillStyle="#FFCC33";
	rect1.fillRect(0,0,width,height);

	// start the stroke:
	//strokeTool = canv1.getContext("2d");

	/** GALLERY ID: '#canvas1' */
	$('#canvas1').bind("mousedown.drawing", function(event) {
	var mouseX = event.pageX;
	var mouseY = event.pageY;
	console.log("MOUSEDOWN: mouse @ x=" + mouseX + " y=" + mouseY);
	drawing.toggle = true;
	//strokeTool.beginPath();
	});

	$(document).bind("mousemove.drawing", function(event) {
	var mouseX = event.pageX;
	var mouseY = event.pageY;
	//console.log("MOUSEMOVE: mouse @ x=" + mouseX + " y=" + mouseY);
	if(drawing.toggle == true) {
	// record mouse position and draw on canvas.
	console.log("drawing active");
	drawRect(mouseX, mouseY);
	}
	});

	//if mouse leaves the element set drawing to false
	$('#canvas1').bind("mouseleave.drawing", function() {
	drawing.toggle = false;
	});


	$('#canvas1').bind("mouseup.drawing", function() {
	if(drawing.toggle == true) {
	// cancel drawing toggle
	drawing.toggle = false;
	}
	});

	});

	function drawRect(mouseX, mouseY) {
	//var canv1 = document.getElementById("canvas1");
	var ctx = canv1.getContext('2d');
	ctx.fillStyle = "#000000";
	ctx.fillRect(mouseX - drawing.xOffset, mouseY - drawing.yOffset, drawing.rectPenSize, drawing.rectPenSize);
	/*strokeTool.moveTo(mouseX - drawing.xOffset,mouseY - drawing.yOffset);
	strokeTool.fill();
	strokeTool.fillStyle = "white";
	*/
	console.log("drew on canvas: " + mouseX + "," + mouseY);
	}

	</script>
	</head>

	<body>
	<h1> Canvas test </h1>

	<canvas id='canvas1' width="700" height="500" style="border:1px solid #c3c3c3;">
	If you can read this your browser is an old piece of crap. Upgrade.
	</canvas>
	</body>
	</html>