HTML <canvas>

Anonymous contributor's avatar
Anonymous contributor
Published Jun 8, 2021Updated Jul 1, 2022
Contribute to Docs

The <canvas> element creates graphics and animations in the page for JavaScript and WebGL to interact with.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

Syntax

<canvas>
  Alternate text goes here, should the browser not support the canvas tag.
</canvas>

There are two major attributes associated with the <canvas> element, height and width. These will set the element height and width, in pixels. They default to a height of 150px, and a width of 300px.

Example

Suppose that a multi-user whiteboard application needs a canvas for the users to interact with. Further, it is important that the canvas is 800px wide, and 600px tall. Additionally it is important to provide a fallback message should the canvas not work.

<html>
  <head> </head>
  <body>
    <canvas width="800" height="600">
      <h3>
        Your browser does not support this feature. Please switch to another
        browser, if possible.
      </h3>
    </canvas>
  </body>
</html>

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours