# Specifying height and width of your base canvas element
Let's take a look at a bug you can run across, by not specifying height and width of your HTML Canvas element. We will look at giving the canvas height/width inline and in the JS.
## Code Example
- https://plnkr.co/edit/GlXzyZmsTWVu4tvQHTR4?p=preview
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Specifying height and width of your base canvas element</h1>
    <canvas id="canvas"></canvas>

    <script src="script.js"></script>
  </body>

</html>
const canvas = document.querySelector('#canvas');
canvas.width = canvas.height = 500;
const context = canvas.getContext('2d');
context.fillRect(0, 0, 50, 50);
canvas {
  width: 500px;
  height: 500px;
}