HTML Canvas Complete Reference
Last Updated :
12 Jun, 2023
The HTML “canvas” element is used to draw graphics via JavaScript. The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Example: This example shows the basic use of Canvas in HTML.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML canvas beginPath() Property
</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksforGeeks
</ h1 >
< h2 >HTML canvas beginPath() Property</ h2 >
< canvas id = "GFG" width = "500" height = "300" ></ canvas >
< script >
var GFG = document.getElementById("GFG");
var context = GFG.getContext("2d");
// Create a path
context.beginPath();
// Set the path width
context.lineWidth = "8";
// Set the path color
context.strokeStyle = "green";
context.moveTo(100, 250);
context.lineTo(150, 50);
context.lineTo(250, 250);
context.stroke();
context.beginPath();
</ script >
</ body >
</ html >
|
Output:
HTML Canvas Reference Complete Reference
Colors, Styles, and Shadows Properties and Methods
Properties
|
Description
|
Example
|
fillStyle |
Return the color, gradient, or pattern used to fill the drawing. |
|
strokeStyle |
Return the stroke of color, gradient, or pattern used in the drawing. |
|
shadowColor |
Set to a string representing a CSS color value, which we want as shadow color. |
|
shadowBlur |
Return the blur level for shadows. |
|
ShadowOffsetX |
Return the horizontal distance of the shadow from the shape. |
|
ShadowOffsetY |
Return the vertical distance of the shadow from the shape. |
|
Methods
|
Description
|
Example
|
createLinearGradient() |
Gradient can be used to fill different colors in rectangles, circles, lines, text, etc |
|
createPattern() |
It is used to repeat the specified element in the specified direction. |
|
addColorStop() |
It is used to specify the color and its position in the gradient object. |
|
Line Styles Properties
Properties
|
Description
|
Example
|
lineCap |
Set or return the style of end caps of line. |
|
lineJoin |
Return the type of corner created, when two lines meet, by using the lineJoin property. |
|
lineWidth |
Return the width of the line (thickness of the line). |
|
miterLimit |
It is used to or returns the maximum miter length. |
|
Rectangles Methods
Methods
|
Description
|
Example
|
rect() |
Create a rectangle in HTML. |
|
fillRect() |
It is used to fill the rectangle using the given color. |
|
strokeRect() |
It is used to draw a rectangle in a given color. |
|
clearRect() |
Clear the specified pixels within a given rectangle. |
|
Paths Methods
Methods
|
Description
|
Example
|
fill() |
It is used to fill the current drawing path. |
|
stroke() |
Draw the path you have defined with all those moveTo() and lineTo() methods. |
|
beginPath() |
It is used to start a path or reset the current path. |
|
moveTo() |
Move the path to the specified point in the canvas, without creating a line. |
|
closePath() |
Create a path from the current point back to the starting point. |
|
lineTo() |
It is used to add a new point to create a line from that point to the last specified point in the canvas |
|
clip() |
It is used to clip a region/part of any shape and size from the given/original canvas. |
|
quadraticCurveTo() |
Create a quadratic curve on the canvas |
|
bezierCurveTo() |
Bezier curves on HTML canvas are drawn using a start point, one or more control point/points, and an endpoint. |
|
arc() |
Create an arc/curve i.e. circles or parts of circles. |
|
arcTo() |
Create an arc/curve between two tangents on the canvas. |
|
isPointInPath() |
Check whether or not the specified point is contained in the current path. |
|
Transformations Methods
Methods
|
Description
|
Example
|
scale() |
It is used to scale the current drawing into a smaller or larger size. |
|
rotate() |
It is used to rotate the drawing by a given angle. |
|
translate() |
Specify that the object is translated by the given translation amount. |
|
transform() |
It is used to replace the current transformation matrix |
|
setTransform() |
It is used to replace the current transformation matrix |
|
Text Properties and Methods
Properties
|
Description
|
Example
|
font |
Change the present font family of the Text content of the <canvas> element. |
|
textAlign |
Return the current alignment for text content, according to the anchor point. |
|
textBaseline |
Return the baseline of the current text. |
|
Methods
|
Description
|
Example
|
fillText() |
It is used to draw filled text on the canvas. |
|
strokeText() |
Draw text (with no fill) on the canvas, by using strokeText() Method. |
|
measureText() |
Return an object that represents the width of the specified text in terms of pixels. |
|
Pixel Manipulation Properties and Methods
Properties
|
Description
|
Example
|
width |
It is used to specify the width of the <canvas> in terms of pixels. |
|
height |
It is used to specify the height of the <canvas> element in terms of pixels. |
|
Methods
|
Description
|
Example
|
createImageData() |
It is used to create a new blank ImageData object. |
|
getImageData() |
It is used to copy the pixel data for the specified rectangle on a canvas. |
|
putImageData() |
It is used to put the image data back into the canvas from a specified ImageData object. |
|
Compositing & Image Drawing Properties and Methods
Properties
|
Description
|
Example
|
globalAlpha |
set or return the current alpha or transparency value of the drawing. |
|
Methods
|
Description
|
Example
|
drawImage() |
It is used to display an image or video on canvas. |
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...