Created
February 21, 2022 19:32
-
-
Save kashav/c996028a024e4ac238754e262cf6f246 to your computer and use it in GitHub Desktop.
favicon canvas fun
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| canvas { border: 1px solid #000000; } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas width="300" height="300" /> | |
| <script> | |
| function getDimensions(canvas) { | |
| const width = canvas.width; | |
| const height = canvas.height; | |
| const x = width / 2; | |
| const y = height / 2; | |
| const radius = Math.sqrt(x ** 2 + y ** 2) / 1.9; | |
| return { x, y, radius }; | |
| } | |
| function onload() { | |
| const canvas = document.querySelector("canvas"); | |
| const dimensions = getDimensions(canvas); | |
| const ctx = canvas.getContext("2d"); | |
| ctx.beginPath(); | |
| ctx.arc( | |
| dimensions.x, | |
| dimensions.y, | |
| dimensions.radius, | |
| 0, | |
| 2 * Math.PI | |
| ); | |
| ctx.fillStyle = "slategray"; | |
| ctx.fill(); | |
| const link = document.createElement("link"); | |
| link.setAttribute("href", canvas.toDataURL("image/png")); | |
| link.setAttribute("rel", "shortcut icon"); | |
| document.querySelector("head").appendChild(link); | |
| } | |
| window.addEventListener("load", onload); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment