improve browser/OS compatibility

Hunter
Thursday, July 16th, 2026 at 4:21 PM


index.html+13-4


readme.md+6-6
index.html
899  		const k = e.key.toLowerCase();
900  		const wasDown = keys[k];
901  		keys[k] = true;
    -		if (e.key === 'Meta') { metaSeq = ++seqCounter; startDragMode('roundness'); }
    -		else if (e.key === 'Shift') { shiftSeq = ++seqCounter; startDragMode('brush'); }
902 +		// keep Firefox from focusing the menu bar on a bare Alt tap
903 +		if (e.key === 'Alt') e.preventDefault();
904 +		// z/x are drag modifiers; block browser undo/cut when cmd is also held
905 +		if (k === 'z' || k === 'x') e.preventDefault();
906 +		if (e.key === 'Meta' || k === 'x') { metaSeq = ++seqCounter; startDragMode('roundness'); }
907 +		else if (e.key === 'Shift' || k === 'z') { shiftSeq = ++seqCounter; startDragMode('brush'); }
908  		else if (!wasDown && (k === 'r' || k === 'g' || k === 'b')) startDragMode('color');
909  	});
910  	window.addEventListener('keyup', (e) => {
911  		const k = e.key.toLowerCase();
912  		keys[k] = false;
    -		if (e.key === 'Meta') { metaSeq = 0; endDragMode('roundness'); }
    -		else if (e.key === 'Shift') { shiftSeq = 0; endDragMode('brush'); }
913 +		if (e.key === 'Alt') e.preventDefault();
914 +		if (e.key === 'Meta' || k === 'x') {
915 +			if (!keys['meta'] && !keys['x']) { metaSeq = 0; endDragMode('roundness'); }
916 +		}
917 +		else if (e.key === 'Shift' || k === 'z') {
918 +			if (!keys['shift'] && !keys['z']) { shiftSeq = 0; endDragMode('brush'); }
919 +		}
920  		else if (k === 'r' || k === 'g' || k === 'b') {
921  			if (!keys['r'] && !keys['g'] && !keys['b']) endDragMode('color');
922  			else {
readme.md
20  ### mark-making
21  
22  - click and drag to make marks
   -- hold `shift` and move your cursor up/down to resize the brush
   -- hold `⌘` and move your cursor up/down to change the shape of the brush
23 +- hold `shift` (or `Z`) and move your cursor up/down to resize the brush
24 +- hold `⌘` (or `X`) and move your cursor up/down to change the shape of the brush
25  - hold any of the ![R](readme_images/R.svg), ![G](readme_images/G.svg), and/or ![B](readme_images/B.svg) keys and move your cursor up/down to change the ![Redness](readme_images/Redness.svg), ![Greenness](readme_images/Greenness.svg), and/or ![Blueness](readme_images/Blueness.svg) of the active color
   -- hold `option` and click anywhere to pick up the color underneath your brush
26 +- hold `option` (or `alt`) and click anywhere to pick up the color underneath your brush
27  - pinch with two fingers to zoom in/out
28  - drag with two fingers to pan around the canvas
29  

38  	- you can continue painting while the canvas animates
39  
40  ### importing / exporting
   -- hold `⌘` and press `S` to save your painting as a .GIF file
   -- hold `⌘` and press `O` to open an existing painting from your filesystem (will clear the current canvas)
41 +- hold `⌘` (or `ctrl`) and press `S` to save your painting as a .GIF file
42 +- hold `⌘` (or `ctrl`) and press `O` to open an existing painting from your filesystem (will clear the current canvas)