HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Canvas

The HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.


HTML <canvas> Element

The <canvas> element is used to draw graphics, animations etc using scripting (usually JavaScript).

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.

Run code

The <canvas> element is only a container for graphics, you must use a script to actually draw the graphics.


Draw a Square

Run code

Draw a Circle

Run code

Draw a Line

Run code

Draw a Text

Run code

Draw a Linear Gradient

Run code

Draw a Radial Gradient

Run code

Some great Canvas websites: