Canvas Tag in HTML5
The <canvas> tag is an HTML element that allows you to draw graphics and animations on the fly using JavaScript. The canvas element acts as a container for the graphics and provides a drawing surface that can be accessed and manipulated using JavaScript code.
The canvas element is typically used for creating dynamic graphics and animations, such as charts, graphs, and interactive games. The tag itself provides only a blank rectangular area, but you can use JavaScript to draw shapes, lines, images, and other elements on the canvas. The graphics can also be updated dynamically based on user interactions, animations, or other events.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Tutor Joes</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
</body>
</html>
Output :
The <canvas> element is a rectangular area on the web page that is used for drawing graphics using JavaScript. The id attribute gives the canvas a unique identifier, "myCanvas", which can be used to reference the canvas in JavaScript code. The width and height attributes set the size of the canvas in pixels, and the style attribute is used to apply CSS styles to the canvas. In this case, the style sets the border of the canvas to be a solid black line with a width of 1 pixel.
Note that, in order to actually draw on the canvas, you would need to write JavaScript code to access the canvas element and use its API to draw graphics.
Change Color,Style and Shadows
| property |
Used for |
| fillStyle |
sets or returns the color, gradient, or pattern used to fill the drawing |
| strokeStyle |
sets or returns the color, gradient, or pattern used for strokes |
| shadowColor |
sets or returns the color to use for shadows |
| shadowBlur |
sets or returns the blur level for shadows |
| shadowOffsetX |
sets or returns the horizontal distance of the shadow from the shape |
| shadowOffsetY |
sets or returns the vertical distance of the shadow from the shape |
| createLinearGradient() |
creates a linear gradient |
| createPattern() |
repeats a specified element in the specified direction |
| createRadialGradient() |
creates a radial/circular gradient |
| addColorStop() |
specifies the colors and stop positions in a gradient object |
Line Styles
| property |
Used for |
| lineCap |
sets or returns the style of the end caps for a line |
| lineJoin |
sets or returns the type of corner created, when two lines meet |
| lineWidth |
sets or returns the current line width |
| miterLimit |
sets or returns the maximum miter length |
Rectangles
| property |
Used for |
| rect() |
Creates a rectangle |
| fillRect() |
Draws a "filled" rectangle |
| strokeRect() |
Draws a rectangle (no fill) |
| clearRect() |
Clears the specified pixels within a given rectangle |
Paths
| property |
Used for |
| fill() |
Fills the current drawing |
| stroke() |
actually draws the path you have defined |
| beginPath() |
begins a path, or resets the current path |
| moveTo() |
moves the path to the specified point in the canvas, without creating a line |
| closePath() |
creates a path from the current point back to the starting point |
| lineTo() |
adds a new point and creates a line to that point from the last specified point in the canvas |
| clip() |
clips a region of any shape and size from the original canvas |
| quadraticCurveTo() |
creates a quadratic Bezier curve |
| bezierCurveTo() |
creates a cubic Bezier curve |
| arc() |
Creates an arc/curve |
| arcTo() |
Creates an arc/curve between two tangents |
| isPointInPath() |
Returns true if the specified point is in the current path, otherwise false |
Paths
| property |
Used for |
| fill() |
Fills the current drawing |
| stroke() |
actually draws the path you have defined |
| beginPath() |
begins a path, or resets the current path |
| moveTo() |
moves the path to the specified point in the canvas, without creating a line |
| closePath() |
creates a path from the current point back to the starting point |
| lineTo() |
adds a new point and creates a line to that point from the last specified point in the canvas |
| clip() |
clips a region of any shape and size from the original canvas |
| quadraticCurveTo() |
creates a quadratic Bezier curve |
| bezierCurveTo() |
creates a cubic Bezier curve |
| arc() |
Creates an arc/curve |
| arcTo() |
Creates an arc/curve between two tangents |
| isPointInPath() |
Returns true if the specified point is in the current path, otherwise false |
Transformations
| property |
Used for |
| scale() |
The current drawing bigger or smaller |
| rotate() |
Rotates the current drawing |
| translate() |
Remaps the (0,0) position on the canvas |
| transform() |
Replaces the current transformation matrix for the drawing |
| setTransform() |
Resets the current transform to the identity matrix. Then runs transform() |
Text
| property |
Used for |
| font |
Returns the current font properties for text content |
| textAlign |
Returns the current alignment for text content |
| textBaseline |
Returns the current text baseline used when drawing text |
| fillText() |
"Filled" text on the canvas |
| strokeText() |
Text on the canvas |
| measureText() |
Returns an object that contains the width of the specified text |
Image Drawing
| property |
Used for |
| drawImage() |
Draws an image, canvas, or video onto the canvas |
Example for Create line :
<!DOCTYPE html>
<html>
<head>
<title>HTML5 - Tutor Joes</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
</body>
</html>
Output :
<canvas>: A rectangular area on the web page that is used for drawing graphics using JavaScript. The id attribute gives the canvas a unique identifier, "myCanvas", which can be used to reference the canvas in JavaScript code. The width and height attributes set the size of the canvas in pixels, and the style attribute sets the style of the canvas, in this case a black border of 1 pixel.
The canvas tag is a powerful tool for creating dynamic and interactive graphics and animations, and is widely used for a variety of applications. However, it can be challenging to learn and requires a good understanding of JavaScript and graphics programming.