HTML — Part-6

HTML Graphics

There are four ways to draw things on the web: Canvas, SVG, CSS, and direct DOM animation. Canvas differ from the other three

HTML Canvas Graphics

• The Canvas API provides a means for drawing graphics via JavaScript’s context object and the HTML <canvas> element.
• It can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
• The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
• A canvas is a rectangular area on an HTML page.
• By default, a canvas has no border and no content and the default size of the canvas is 300pixels X 150 pixels.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Note: Always specify an 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.

HTMLCanvasElement

The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements.

Properties: —

1. HTMLCanvasElement.height —

• is a positive integer
• the default value of 150