Create canvas rectangle

2021-07-02 12:39:20 -04:00
parent 868de89374
commit 9f93726a3a
1 changed files with 27 additions and 0 deletions
@@ -0,0 +1,27 @@
 <!doctype html>
 <html>
 <head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
 </head>
 <body>
    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
    <script>
        const canvas = document.querySelector('#canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = "red";
        ctx.fillRect(100, 100, 500, 300); //filled shape
        ctx.strokeRect(90, 90, 520, 320); // outline
        ctx.clearRect(150, 150, 400, 200);  //transparent
    </script>
 </body>
 </html>