Created
April 22, 2012 19:15
-
-
Save ynonp/2466264 to your computer and use it in GitHub Desktop.
html file
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment