ynonp/index.html

## index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Canny</title>
    <style type="text/css">
        canvas { border: 5px solid purple; }
        div    { width: 400px; margin: 0 auto; }
    </style>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

</head>
<body>
    <div>
        <canvas width="400" height="400"></canvas>
    </div>

    <script src="main.js"></script>
</body>
</html>

## main.js
/**
 * Created with JetBrains WebStorm.
 * User: ynonperek
 * Date: 4/22/12
 * Time: 5:58 PM
 * To change this template use File | Settings | File Templates.
 */

var can = document.querySelector('canvas');
var ctx = can.getContext('2d');

var global = {
    current_color: 'blue',
    current_shape: 'circle',
    context: ctx
};


/////////////////////////////////////////////

var paint_shape = function(e) {
    var canvas_x = e.pageX - $('canvas').offset().left;
    var canvas_y = e.pageY - $('canvas').offset().top;

    paint_small_box( canvas_x, canvas_y, global.context );
};


var paint_small_box = function( x, y, ctx ) {
    ctx.save();

    ctx.fillStyle = 'black';
    ctx.fillRect(x - 10, y - 10, 10, 10);

    ctx.restore();
};

var start_paint = function() {
    $('canvas').bind('vmousemove', paint_shape );
};

var stop_paint = function() {
    $('canvas').unbind('vmousemove', paint_shape );
};

var set_color = function() {

};


///////////////////////////////////////////

$('canvas').bind('vmousedown', start_paint );
$('canvas').bind('vmouseup', stop_paint );
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>Canny</title>
	<style type="text/css">
	canvas { border: 5px solid purple; }
	div { width: 400px; margin: 0 auto; }
	</style>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

	</head>
	<body>
	<div>
	<canvas width="400" height="400"></canvas>
	</div>

	<script src="main.js"></script>
	</body>
	</html>
	/**
	* Created with JetBrains WebStorm.
	* User: ynonperek
	* Date: 4/22/12
	* Time: 5:58 PM
	* To change this template use File \| Settings \| File Templates.
	*/

	var can = document.querySelector('canvas');
	var ctx = can.getContext('2d');

	var global = {
	current_color: 'blue',
	current_shape: 'circle',
	context: ctx
	};


	/////////////////////////////////////////////

	var paint_shape = function(e) {
	var canvas_x = e.pageX - $('canvas').offset().left;
	var canvas_y = e.pageY - $('canvas').offset().top;

	paint_small_box( canvas_x, canvas_y, global.context );
	};


	var paint_small_box = function( x, y, ctx ) {
	ctx.save();

	ctx.fillStyle = 'black';
	ctx.fillRect(x - 10, y - 10, 10, 10);

	ctx.restore();
	};

	var start_paint = function() {
	$('canvas').bind('vmousemove', paint_shape );
	};

	var stop_paint = function() {
	$('canvas').unbind('vmousemove', paint_shape );
	};

	var set_color = function() {

	};






	///////////////////////////////////////////

	$('canvas').bind('vmousedown', start_paint );
	$('canvas').bind('vmouseup', stop_paint );