Charts

Basic usage of canvas

• At first sight a < canvas> looks like the < img> element, with the only clear difference being that it doesn’t have the src and alt attributes. Indeed, the < canvas> element has only two attributes, width and height.
• When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high.
• he id attribute isn’t specific to the < canvas> element but is one of the global HTML attributes which can be applied to any HTML element (like class for instance).
• The < canvas> element differs from an < img> tag in that, like for < video>, < audio>, or < picture> elements, it is easy to define some fallback content, to be displayed in older browsers not supporting it,
• The < canvas> element creates a fixed-size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.
• Unlike SVG, < canvas> only supports two primitive shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created by combining one or more paths.
• A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color. A path, or even a subpath, can be closed. To make shapes using paths, we take some extra steps:
• The second step is calling the methods that actually specify the paths to be drawn. We’ll see these shortly.
• The third, and an optional step, is to call closePath(). This method tries to close the shape by drawing a straight line from the current point to the start.
• color is a string representing a CSS < color>, a gradient object, or a pattern object.
• In addition to drawing opaque shapes to the canvas, we can also draw semi-transparent (or translucent) shapes. This is done by either setting the globalAlpha property or by assigning a semi-transparent color to the stroke and/or fill style. Back to main