Search⌘ K
Home
Courses
HTML5 Canvas: From Noob to Ninja - an interactive deep dive

Properly Resizing your Canvas

Understand how to properly resize the HTML5 canvas element by setting width and height attributes instead of using CSS. Learn to dynamically adjust the canvas size programmatically to maintain proper content display, including techniques for fullscreen canvas resizing.

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:

HTML
<!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 ...