How to Scroll Inside an HTML Canvas

By Bennett Gavrish

Version 5 of the HyperText Markup Language, better known as "HTML," includes support for a new element called the "canvas." An HTML5 canvas element acts as a container for animation, graphics or custom JavaScript code. If you want to enable scrolling within a canvas on your Web page, you can wrap the entire canvas element in a div element and then use the overflow attribute to add the necessary scroll bars.

Things You'll Need

  • Web editing application

Step 1

Open the HTML document that contains the canvas element in a Web editing application or a word processor.

Step 2

Place your text cursor before the "" tag in your HTML code.

Step 3

Type the following into your HTML code:

The overflow attribute will enable scroll bars in your container.

Step 4

Replace the width and height attributes with the pixel amounts you want to use to define the size of the div container. Make sure that the width and height values you choose are large enough to fit the entire size of your canvas element.

Step 5

Place your text cursor after the "" tag.

Step 6

Type "

" into the HTML code to close the div container.

Step 7

Save the HTML document and upload it to your Web server to view the canvas element with scrolling.