Open In App
Related Articles

HTML Canvas Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

fillStyleReturn the color, gradient, or pattern used to fill the drawing.
Try
strokeStyleReturn the stroke of color, gradient, or pattern used in the drawing.
Try
shadowColorSet to a string representing a CSS color value, which we want as shadow color.
Try
shadowBlurReturn the blur level for shadows.
Try
ShadowOffsetXReturn the horizontal distance of the shadow from the shape. 
Try
ShadowOffsetYReturn the vertical distance of the shadow from the shape.
Try

Methods

Description

Example

createLinearGradient()Gradient can be used to fill different colors in rectangles, circles, lines, text, etc
Try
createPattern()It is used to repeat the specified element in the specified direction. 
Try
addColorStop()It  is used to specify the color and its position in the gradient object.
Try

Line Styles Properties

Properties

Description

Example

lineCapSet or return the style of end caps of line. 
Try
lineJoinReturn the type of corner created, when two lines meet, by using the lineJoin property.
Try
lineWidthReturn the width of the line (thickness of the line). 
Try
miterLimitIt is used to or returns the maximum miter length.
Try

Rectangles Methods

Methods

Description

Example

rect()Create a rectangle in HTML.
Try
fillRect()It is used to fill the rectangle using the given color. 
Try
strokeRect()It is used to draw a rectangle in a given color. 
Try
clearRect()Clear the specified pixels within a given rectangle.
Try

Paths Methods

Methods

Description

Example

fill()It is used to fill the current drawing path. 
Try
stroke()Draw the path you have defined with all those moveTo() and lineTo() methods. 
Try
beginPath()It is used to start a path or reset the current path.
Try
moveTo()Move the path to the specified point in the canvas, without creating a line. 
Try
closePath()Create a path from the current point back to the starting point. 
Try
lineTo()It is used to add a new point to create a line from that point to the last specified point in the canvas
Try
clip()It is used to clip a region/part of any shape and size from the given/original canvas.
Try
quadraticCurveTo()Create a quadratic curve on the canvas
Try
bezierCurveTo()Bezier curves on HTML canvas are drawn using a start point, one or more control point/points, and an endpoint.
Try
arc()Create an arc/curve i.e. circles or parts of circles.
Try
arcTo()Create an arc/curve between two tangents on the canvas.
Try
isPointInPath()Check whether or not the specified point is contained in the current path.
Try
 

Transformations Methods

Methods 

Description

Example

scale()It is used to scale the current drawing into a smaller or larger size.
Try
rotate()It is used to rotate the drawing by a given angle.
Try
translate()Specify that the object is translated by the given translation amount.
Try
transform()It is used to replace the current transformation matrix
Try
setTransform()It is used to replace the current transformation matrix
Try

Text Properties and Methods

Properties

Description

Example

fontChange the present font family of the Text content of the <canvas> element. 
Try
textAlignReturn the current alignment for text content, according to the anchor point. 
Try
textBaselineReturn the baseline of the current text. 
Try

Methods 

Description

Example

fillText()It is used to draw filled text on the canvas.
Try
strokeText()Draw text (with no fill) on the canvas, by using strokeText() Method.
Try
measureText()Return an object that represents the width of the specified text in terms of pixels.
Try

Pixel Manipulation Properties and Methods

Properties

Description

Example

widthIt is used to specify the width of the <canvas> in terms of pixels. 
Try
heightIt is used to specify the height of the <canvas> element in terms of pixels. 
Try

Methods 

Description

Example

createImageData()It is used to create a new blank ImageData object. 
Try
getImageData()It is used to copy the pixel data for the specified rectangle on a canvas.
Try
putImageData()It is used to put the image data back into the canvas from a specified ImageData object.
Try

Compositing & Image Drawing Properties and Methods

Properties

Description

Example

globalAlpha set or return the current alpha or transparency value of the drawing. 
Try

Methods

Description

Example

drawImage()It is used to display an image or video on canvas.
Try


Last Updated : 12 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Similar Reads