Created
December 17, 2021 09:21
-
-
Save Davidslv/325bc8d589991523908510eb018a2ad1 to your computer and use it in GitHub Desktop.
Experimenting with Canvas
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 lang="en" dir="ltr"> | |
| <body> | |
| <canvas id="canvas" width="600" height="600"></canvas> | |
| <script type="text/javascript"> | |
| let canvas = document.querySelector('canvas'); | |
| let context = canvas.getContext('2d'); | |
| context.fillStyle = 'blue'; | |
| context.lineWidth = 4; | |
| context.beginPath(); | |
| // rectangle | |
| context.rect(100, 100, 400, 400); | |
| // draws on canvas | |
| // context.stroke(); | |
| context.beginPath(); | |
| context.arc(300, 300, 100, 0, Math.PI * 2); | |
| // draws on canvas | |
| // context.stroke(); | |
| for(let i = 0; i < 5; i++) { | |
| for (let j = 0; j < 5; j++) { | |
| let width = 60; | |
| let height = 60; | |
| let gap = 20; | |
| let x = 100 + (width + gap) * i; | |
| let y = 100 + (width + gap) * j; | |
| if (Math.random() > 0.5) { | |
| context.beginPath(); | |
| context.rect(x, y, width, height); | |
| context.stroke(); | |
| } | |
| else { | |
| context.beginPath(); | |
| context.rect(x + 8, y + 8, width - 16 , height - 16); | |
| context.stroke(); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Author
Davidslv
commented
Dec 17, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment