HTML5 Canvas: From Noob to Ninja - an interactive deep dive/

...

/

Properly Resizing your Canvas

Properly Resizing your Canvas

We'll cover the following...

The fix for this is pretty straightforward. Don’t use CSS for specifying your canvas’s size. Instead, set the width and height attribute values on your canvas element directly:

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

Once you do this, both your canvas as well ...