Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            let canvas = document.getElementById("canvasId");
            let context = canvas.getContext("2d");
            context.beginPath();
            context.fillStyle = 'green';
            context.rect(50, 50, 50, 50);
            context.fill();
            context.closePath();

            context.beginPath();
            context.translate(75, 75);
            context.rotate(45 * Math.PI / 180);
            context.translate(-75, -75);
            context.fillStyle = 'blue';
            context.rect(50, 50, 50, 50);
            context.fill();
            context.closePath();
        });


    s</script>
    <style type="text/css">
        #canvasId{
            background: black;
        }
    </style>
</head>
    <body>
        <canvas id="canvasId" class="d-block" width="800" height="600"></canvas>
    </body>
</html>