<!-- thumbnail: https://i.sstatic.net/TvYUA.png -->
<!-- version: 1.0.6 -->
<!-- tag: script -->
<!-- excerpt: A userscript that lets you draw directly onto images on any Stack Exchange site to add freehand drawings :) -->

What is it?
--

A userscript that lets you draw directly onto images on any Stack Exchange site to add [freehand circles](https://meta.stackexchange.com/a/19775/260841) (or anything else you might like to add).

It has been designed to work like http://stackapps.com/q/2177/26088 which unfortunately the owner [doesn't have time to maintain anymore](http://stackapps.com/questions/2177/stackexchange%e2%84%a2-supercollider-freehand-circle%e2%84%a2-editor-now-supported-on-every-s#comment11144_2177) :(

How do I use it?
--

On every image on every site you will now see 2 buttons added: `edit` and `save`.

Clicking `edit` converts the image to a canvas for you to draw on. A toolbar is added underneath the image where you can change the brush **colour** or brush *width**. Once you are done, you can click `save` and the script will upload the new image to imgur, and edit the post for you with the new link in it!

Note: You **must have** an access token for this to work. Get one [at Github](http://shu8.github.io/Freehand-Circles-Drawing-Tool/)

Install
--

1. You need to have something like [Greasemonkey](http://www.greasespot.net/) or [Tampermonkey](http://tampermonkey.net/) for this to work, as it saves your access token via `GM_setValue()`!
2. You need an access token. Get one [from here](http://shu8.github.io/Freehand-Circles-Drawing-Tool/)
3. Install: <kbd>[view source](https://github.com/shu8/Freehand-Circles-Drawing-Tool/blob/master/freehandCircles.user.js)</kbd> or <kbd>[install](https://github.com/shu8/Freehand-Circles-Drawing-Tool/raw/master/freehandCircles.user.js)</kbd>

![enter image description here][1]

Notes
--

1. Images are save under imgur.com and NOT stack.imgur.com (Stack Exchange's own domain for inline images). This shouldn't be a problem because it [says here](https://help.imgur.com/hc/en-us/articles/201476457-How-long-do-you-keep-the-images-) that images are kept forever...
2. The script works thanks to [Fabric.JS](http://fabricjs.com/) and [jQuery](http://jquery.com/)
3. This script has only been tested on Google Chrome and Firefox - I haven't tested on other browsers!
4. [Here is a sandbox where you can test the script](https://meta.stackexchange.com/questions/3122/formatting-sandbox/259022#259022)

![](https://i.sstatic.net/TvYUA.png)

---

# Change log

v1.0.6: Fixed the script - it was broken with new images [that are now linked to a bigger version automatically](https://meta.stackexchange.com/a/261180/260841).

  [1]: https://i.sstatic.net/ywZjk.png