diff options
-rw-r--r-- | js/inknswitch/index.html | 2 | ||||
-rw-r--r-- | js/inknswitch/ink.js | 9 |
2 files changed, 10 insertions, 1 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html index 8a9dbc5..91f9ff2 100644 --- a/js/inknswitch/index.html +++ b/js/inknswitch/index.html @@ -30,7 +30,7 @@ </style> </head> <body> - <textarea id="noteArea" rows="10" cols="30" placeholder="This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw images that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap cmd or ctrl + d. When in drawing mode, tap c to clear the canvas."></textarea> + <textarea id="noteArea" rows="10" cols="30" placeholder="This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw images that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap cmd or ctrl + d. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."></textarea> <canvas id="drawingArea" width="500" height="500"></canvas> <script src="ink.js"></script> </body> diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js index e51bbcd..bd5fb6d 100644 --- a/js/inknswitch/ink.js +++ b/js/inknswitch/ink.js @@ -113,5 +113,14 @@ document.addEventListener('keydown', (e) => { } } + // S key to save the canvas as an image + if (e.key === 's' && canvas.style.pointerEvents === 'auto') { + const dataUrl = canvas.toDataURL(); + const a = document.createElement('a'); + a.href = dataUrl; + a.download = 'canvas.png'; + a.click(); + } + localStorage.setItem('noteContent', noteArea.value); }); \ No newline at end of file |