Leedehai/canvas.html

## canvas.html
<!-- The boilerplate for HTML5 canvas painting. View in browser.
    How to use: create canvas.js in the same directory and get the
        canvas object by the element id "canvas". Draw on the canvas.
-->
<html translate="no">

<head>
    <title>Canvas sketching</title>
    <meta name="google" content="notranslate">
    <style>
        body {
            background-color: #efefef;
        }

        canvas {
            background-color: white;
        }

        p {
            font-size: 12px;
        }

        a {
            color: blue;
        }

        #data_url {
            width: 100ch;
            font-family: monospace;
            font-size: 12px;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <div>
        <canvas id="canvas" style="border:none;">
            Your browser does not support the HTML5 canvas tag.</canvas>
        <p>
            <a href="canvas.js" target="_blank">Sketching script</a>
        </p>
        <p>
            Use Node to convert data URL to image:
            <a href="https://gist.github.com/madhums/e749dca107e26d72b64d" target="_blank">GitHub Gist</a>,
            or use an online utility like
            <a href="https://onlinepngtools.com/convert-base64-to-png" target="_blank">[1]</a>
            or
            <a href="https://codebeautify.org/base64-to-image-converter" target="_blank">[2]</a>.
        </p>
        <p>
            Data URL:
            <button id="copy_to_clipboard">Copy to clipboard</button>
            <div id="data_url"></div>
        </p>
    </div>
    <script src="canvas.js"></script>
    <script>
        // Data URL (base64)
        const dataUrl = document.getElementById('canvas').toDataURL('image/png');
        document.getElementById('data_url').textContent = dataUrl;
    </script>
    <script>
        /**
         * Copy to clipboard. The specification requires this function is called
         * after querying and getting the clipboard permission, but Firefox does
         * not need (and does not support) the permission, and Safari does not
         * support Permission API and Clipboard API at all.
         * NOTE Alternative approach: execCommand('copy') is not supported in
         * Safari, and execCommand() is a deprecating feature.
         * NOTE It turns out Chrome/Chromium is indeed the best! (1/2020)
         * https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
         * https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
         * @param {!HTMLElement} contentElement
         */
        function copyToClipboard(contentElement) {
            const copyToClipboardImpl = () => {
                navigator.clipboard.writeText(contentElement.textContent);
            };
            try {
                if (navigator.permissions) {
                    navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
                        if (result.state == 'granted' || result.state == 'prompt') {
                            copyToClipboardImpl();
                        }
                    }).catch(() => { // Firefox does not fully support the Permission API.
                        copyToClipboardImpl();
                    });
                } else { // Some others do not support the Permission API at all.
                    copyToClipboardImpl();
                }
            } catch (e) { // Safari, uhh..
                if (e instanceof TypeError) {
                    window.alert('The copy-text feature encountered a bug.\n\n'
                        + 'It needs Clipboard API and Permissions API, features\n'
                        + 'required in the Web Standard. Your browser does not\n'
                        + 'support them :( Consider using another browser.');
                }
            }
        }

        const copyButton = document.querySelector("button#copy_to_clipboard");
        copyButton.addEventListener('click', () => {
            copyToClipboard(document.getElementById("data_url"));
        });
    </script>
</body>

</html>
	<!-- The boilerplate for HTML5 canvas painting. View in browser.
	How to use: create canvas.js in the same directory and get the
	canvas object by the element id "canvas". Draw on the canvas.
	-->
	<html translate="no">

	<head>
	<title>Canvas sketching</title>
	<meta name="google" content="notranslate">
	<style>
	body {
	background-color: #efefef;
	}

	canvas {
	background-color: white;
	}

	p {
	font-size: 12px;
	}

	a {
	color: blue;
	}

	#data_url {
	width: 100ch;
	font-family: monospace;
	font-size: 12px;
	word-wrap: break-word;
	}
	</style>
	</head>

	<body>
	<div>
	<canvas id="canvas" style="border:none;">
	Your browser does not support the HTML5 canvas tag.</canvas>
	<p>
	<a href="canvas.js" target="_blank">Sketching script</a>
	</p>
	<p>
	Use Node to convert data URL to image:
	<a href="https://gist.github.com/madhums/e749dca107e26d72b64d" target="_blank">GitHub Gist</a>,
	or use an online utility like
	<a href="https://onlinepngtools.com/convert-base64-to-png" target="_blank">[1]</a>
	or
	<a href="https://codebeautify.org/base64-to-image-converter" target="_blank">[2]</a>.
	</p>
	<p>
	Data URL:
	<button id="copy_to_clipboard">Copy to clipboard</button>
	<div id="data_url"></div>
	</p>
	</div>
	<script src="canvas.js"></script>
	<script>
	// Data URL (base64)
	const dataUrl = document.getElementById('canvas').toDataURL('image/png');
	document.getElementById('data_url').textContent = dataUrl;
	</script>
	<script>
	/**
	* Copy to clipboard. The specification requires this function is called
	* after querying and getting the clipboard permission, but Firefox does
	* not need (and does not support) the permission, and Safari does not
	* support Permission API and Clipboard API at all.
	* NOTE Alternative approach: execCommand('copy') is not supported in
	* Safari, and execCommand() is a deprecating feature.
	* NOTE It turns out Chrome/Chromium is indeed the best! (1/2020)
	* https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard
	* https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
	* @param {!HTMLElement} contentElement
	*/
	function copyToClipboard(contentElement) {
	const copyToClipboardImpl = () => {
	navigator.clipboard.writeText(contentElement.textContent);
	};
	try {
	if (navigator.permissions) {
	navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
	if (result.state == 'granted' \|\| result.state == 'prompt') {
	copyToClipboardImpl();
	}
	}).catch(() => { // Firefox does not fully support the Permission API.
	copyToClipboardImpl();
	});
	} else { // Some others do not support the Permission API at all.
	copyToClipboardImpl();
	}
	} catch (e) { // Safari, uhh..
	if (e instanceof TypeError) {
	window.alert('The copy-text feature encountered a bug.\n\n'
	+ 'It needs Clipboard API and Permissions API, features\n'
	+ 'required in the Web Standard. Your browser does not\n'
	+ 'support them :( Consider using another browser.');
	}
	}
	}

	const copyButton = document.querySelector("button#copy_to_clipboard");
	copyButton.addEventListener('click', () => {
	copyToClipboard(document.getElementById("data_url"));
	});
	</script>
	</body>

	</html>