Created
November 16, 2018 15:22
-
-
Save karbassi/e05b628ae271a11773d9d3f34929dea6 to your computer and use it in GitHub Desktop.
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| #canvas { | |
| border: 5px solid black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="canvas" width="500" height="500"></canvas> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext("2d"); | |
| const drawSVG = (svg) => { | |
| // The Path2D() constructor returns a newly instantiated Path2D object, | |
| // optionally with another path as an argument (creates a copy), or | |
| // optionally with a string consisting of SVG path data. | |
| // | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D#Using_SVG_paths | |
| // | |
| let path = new Path2D(svg); | |
| ctx.stroke(path); | |
| return path; | |
| }; | |
| drawSVG("M20.5 98.5h159v117h159v-117h141v303h-140v-115h-163v108h-156z"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment