0

I am a CSS fresher.
I was expecting a black square as a result of the following code but I only get a black rectangle.
Can anyone tell me where the problem is?

Here is my code:-

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    canvas {
      width: 800px;
      height: 800px;
      border: 3px solid black;
    }
  </style>
</head>

<body>
  <canvas id="cv" class="cav"></canvas>
  <script>
    var canvas = document.getElementById('cv')
    var context = canvas.getContext('2d')
    context.fillRect(30, 30, 150, 150)
  </script>
</body>

</html>
World Producer
  • 39
  • 6
  • 2
    You have to set the size on the `` element itself. Changing `width`/`height` via CSS will only change the "viewport" of the canvas - but not the element itself. – Andreas Oct 30 '22 at 12:24
  • You can read about a similar question here: https://stackoverflow.com/questions/35331128/incorrect-canvas-width-value – ChenBr Oct 30 '22 at 12:26

0 Answers0