I’m a geek. I know this. And it is because of this that I want things like “virtual” graph paper. And I want it online. And in a browser. So, after impatiently shrugging off the first page of Google search, I decided to try my hand at making one of my own using nothing but the fancy new HTML5 canvas and some JavaScript. It’s nothing over-the-top, and I’m sure there are bugs, but I think it’s pretty cool and has great potential for future expansion (saving, shapes, fills, labels, etc). I’ve testing in Chrome and Firefox on my Mac. Safari will presumably work as well. Internet Explorer will not work at all. I’ll probably hack on it more in the future, but for now, here it is: Virtual Graph Paper.
PS – It’s totally “open source”. Just view source to get the code.
This is a big hit at the office. You’ve probably just ruined 3 peoples’ productivity.
hey, how do I save and then reopen to work on it? This is awesome.
Awesome! Virtual Graph Paper + iPad + Dungeons & Dragons = Lots of awesomesauce
I’ll have to do a little tweaking to make it work on iOS/Android devices, but it just might work! I miss AD&D, but I still have my PHB!
Did you get it to work on Android? It doesn’t appear to work on my tablet. Thanks – Greg
This is really awesome Ive been looking for virtual graph paper online but i couldn’t find any. thanks for making this Garrett its very useful.
I’ve been thinking about playing some of those old-school PC RPG videogames lately, and was just searching for virtual graph paper just for that.
Thanks for making it exist! It really is useful!
I needed something just like this, and BAM. Here it is. Thank the internets for your time. I would really really love saving too.
I love you.
Thanks! This is so useful!
I’m making D&D dungeon maps on this, and it is awesome! Thanks for this!
Very nice. Seems to work OK in Firefox 3.6.15. The little popup ballons of the coordinates get in the way sometimes when I click to draw lines.
I want two options tho, a way to center the paper at 0, 0, so that I can have negative numbers (drawing some geometry examples that go from -1 to +1). And then a simple legend along the top and side to show the coordinate center/scale (like from -100 to +100 along the left edge).
Good idea!
Just made 19 maps for my next D&D mob using this. Make it, screen cap it, crop it in Ifranview, paste into Word. Perfect.
Add the ability to crop and save as an image and it’ll be the dream of every DM everywhere. This is the kind of thing WotC needs to implement for their builder tools.
I’ve offset the coordinates pop-up to get it out of the way and added a way to display the graph in a new window as a PNG file. Not sure about cropping, but I’ll see if I can find an easy way to do it.
Is there a stand alone application of this for Windows that I can download and use offline?
You can save the page to your desktop. Since it is HTML, it will only run in a web browser. It’s possible that it will work in something like Prism (http://prism.mozillalabs.com/), but I haven’t tested it to see if it is compatible or not.
His is a great tool – I can’t believe that something like this didn’t exist before! Being able to change the line color after the fact and to fill in shapes with different colors would be amazing, though…
**this. THIS is a great tool, not HIS. Sorry.
This is great!!! Is there a way to type on it to label the axis and title?
This is fantastic! Would be absolutely amazing if it were iPad accessible from a web page to, I’m sure many people would use it on a day to day basis on their iPad, I know I definitely would!
Thank you for the great work
You’re neat. I love you. Graph paper makes me happy. I just had a frontal lumpectomy. Still love graph paper. Sigh.
Once I read that (frontal lumpectomy) I decide to Google it. Sorry, Google IMAGE it. I hate you forever.
-PS My name is Garrett too, so it’s kind of funny seeing your own name on the homepage of a website.
Thanks, you really helped me with my school work.
This is fantastic – thanks so much!
To those who were looking for an iPad conversion:
Just adding a new set of bindings after the “onmouseup” function worked for me.
After this, the graph paper works on desktop and iPad.
Caveat: I’m not sure why, but with this setup, ‘saving’ a line on the iPad is different. After drawing a line (click and drag, slowly is good), you must tap the screen with *another finger* (while holding down the first) to save the current line correctly.
/** Alternate bindings for iOS **/
/* When the user moves the mouse */
canvas.ontouchmove = function(e) {
if(!e) var e = window.event;
if(e.touches.length == 1){
targetEvent = e.touches.item(0);
var x = targetEvent.clientX;
var y = targetEvent.clientY;
/* Update the coordinates */
toolset_coord.update(x,y);
popup.show(x,y);
/* If we're drawing a line, show the guide line */
if(this.mousedown)
line.guide(x,y);
}
}
/* When the clicker goes down (but not back up) */
canvas.ontouchstart = function(e) {
if(!e) var e = window.event;
if(e.touches.length == 1){
targetEvent = e.touches.item(0);
var x = targetEvent.clientX;
var y = targetEvent.clientY;
/* Confirm it's down (handy for later) */
this.mousedown = true;
/* Set the start of the line and show the pop-up */
line.start(x,y);
popup.show(x,y);
}
}
/* When the clicker comes back up */
canvas.ontouchend = function(e) {
if(!e) var e = window.event;
if(e.touches.length == 1){
targetEvent = e.touches.item(0);
var x = targetEvent.clientX;
var y = targetEvent.clientY;
/* We're no longer holding down */
this.mousedown = false;
/* Set the stop point and hide the pop-up */
line.stop(x,y);
popup.hide();
}
}
/** End alternate bindings **/
Your virtual graph paper is a perfect match for a classroom exploration I have planned. THANKS!
This is great but would love to add some text any ideas?????
This is amazing! Wish I could write code cause I have a few great ideas to add to this! Thanks a million!
Love the graph paper! Not sure if you’re still developing it any more, but in case you are perhaps you want to consider adding:
- Keyboard shortcuts for line width (directly using the number keys, or incrementally with +/-)
- Keyboard shortcuts for line colour (directly using the qwerty row, or incrementally with [/])
Cheers!
Thank you so much your a life saver, I had this massive piece of homework which I had left for the last day (oops) and I had left my graph paper at school and my printer wasn’t working!!! So lots of thanks. I agree with Michael about the keyboard shortcuts though.
Thanks a ton. its a grate program and it saves me like 4 hours in math xD
The only thing i can say is that a point function could be useful
thanks again. if you update it alot you may be able too sell this =) best of luck
~the dragon
Hey Garret, I love your setup here man. Great work for sure. I have to agree that it is epic for PNP RPGs. I was hoping that you might be able to add another feature for me. I am a minecraft player. Any chance you can add a feature to fill in the blocks? This would make planning my next structure extremely easy. Also, with that in mind… maybe expand the size so you can zoom in and out if the grid is HUGE.. Say maybe 500 x 500. LOL
I was just thinking the same exact thing. have you had any luck finding something like that online?
I’m with Inemy. I looked this up to help with my minecraft designing. It would really be great to have a fill feature.
Thanks so much for this. I needed to make a quick sketch of some cabinets I am working on to take to a counter fabricator, and this was great!
An erase feature (or draw over with a new line the color of the graph paper itself would do the same thing) would be helpful for those mistakes I don’t notice until 25 draws later.
But again, thank you!!!
You are truly awesome.
I will find many great uses for this.
Cheers!
thx 4 making it .. its really useful.
it bailed me out a lot.. i never do my math or any other projects untill like the last 2 days
just saying but u might want to add a feature of dots so users can make line by plotting and can make a scatterplot
Something quick and easy that you could potentially add: A Ctrl+Z shortcut to undo.
I’ve used this a few times to figure out how to best cut pattern pieces out of a big piece of fabric. Thanks!
If somebody could add the ability to plot points, and to create circular/curves…I would throw my graph paper away
I don’t suppose we can get a copy of this that allows us to scroll across more graph paper..? I’ve found the dimensional limitations to be a problem for me. I’m also curious if it would be possible create a few layers which could be viewed simultaneously.
Layer A [a graph of a room]
Layer B [specific (or hidden) things within the room]
Layer C [the room above, or below]
This is awesome!
Is there a way to type text onto the graph?
I’m a high school student using computer classes, so this program was perfect for me. Thank you so much!!!
I teach math. This is a great took for my students. Thanks!
Wow I’ve been looking for something like this for years!
Wish there were a way to erase (or clear line color).
many thanks!
I love you, man. Gotta graph now.
THANK YOU!! U R A HERO! Its SOOO cool!
can this be downloaded its awesome
wonderful, can you make a centimeter scale?
Nicely done.
If you ever want to add some features, an erase tool would be a good place to start. Maybe a highlight and drag feature or even rotation/flip. Numbered X and Y axes with on/off function?
i like this very much, i use it for school projects and it is grate for graphic! keep working on it and!
Thank you! Using it to design a home office!
I love this. Really helps for homework.
I guess I’m a nerd, too. I’ve been looking for something exactly like this for a long time. Thank you SO MUCH! You just made my nerdy day. I love it.
can you maybe put a point marker in there.that’ll be great. thanks! other than that this has been very helpful and useful