Why CSS Doesn't Work

The best way to see why CSS does not work in this case is to look at an example. What we want to do is display the following image inside a canvas element whose size is set to 350x250 using CSS:

widget

Our CSS and HTML look as follows:

Press + to interact
<!DOCTYPE html>
<html>
 
<head>
  <style>
    #myCanvas {
      border-width: 1px;
      border-style: solid;
      border-color: Black;
      width: 350px;
      height: 250px;
    }
  </style>
</head>
 
<body>
  <div id="container">
    <canvas id="myCanvas">
 
    </canvas>
  </div>
 
  <script>
    // omitted!
  </script>
</body>
 
</html>

Note

For the sake of simplicity, I have omitted the JavaScript that actually displays that image inside our canvas.

When you run this example, here is what you will see:

widget

Notice that the canvas itself is properly sized at 350 pixels by 250 pixels. What isn't sized properly is the content inside the canvas. Let's look at how to fix this.