HTML Tutorial
HTML Introduction
HTML Basic
HTML Elements
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formattings
HTML Comments
HTML Colors
HTML CSS
HTML Link
HTML Images
HTML Tables
HTML Block & Inline
HTML Classes
HTML Id
HTML Head
HTML Javascript
HTML Forms
HTML Forms
HTML Form Atrributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
HTML Input Form Attributes
HTML Graphics
HTML Canvas
HTML SVG
HTML Media
HTML Media
HTML Video
HTML Audio
HTML Youtube
Previous
HTML Canvas Graphics
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.
What is HTML Canvas?
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:
Example
Note: Always specify an <id>id attribute (to be referred to in a script), and a <width> and <height> attribute to
define the size of the canvas. To add a border, use the <style> attribute.