Virtual Graph Paper

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 entry was posted in Geek Stuff and tagged , , , , , . Bookmark the permalink.

20 Responses to Virtual Graph Paper

  1. Nick D says:

    This is a big hit at the office. You’ve probably just ruined 3 peoples’ productivity.

  2. Awesome! Virtual Graph Paper + iPad + Dungeons & Dragons = Lots of awesomesauce

  3. Garrett says:

    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!

  4. Liam Thornley says:

    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.

  5. 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!

  6. alex says:

    I needed something just like this, and BAM. Here it is. Thank the internets for your time. I would really really love saving too.

  7. Kaze says:

    I love you.

  8. Skylar says:

    Thanks! This is so useful!

  9. Nathan says:

    I’m making D&D dungeon maps on this, and it is awesome! Thanks for this!

  10. Mike says:

    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).

  11. Dave W says:

    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.

    • Garrett says:

      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.

  12. Bryan says:

    Is there a stand alone application of this for Windows that I can download and use offline?

  13. Kaija says:

    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…

  14. Liz says:

    This is great!!! Is there a way to type on it to label the axis and title?

  15. Bill says:

    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

  16. Alex Gray says:

    You’re neat. I love you. Graph paper makes me happy. I just had a frontal lumpectomy. Still love graph paper. Sigh.

  17. Jaiden says:

    Thanks, you really helped me with my school work.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Spam protection by WP Captcha-Free