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.	Try
strokeStyle	Return the stroke of color, gradient, or pattern used in the drawing.	Try
shadowColor	Set to a string representing a CSS color value, which we want as shadow color.	Try
shadowBlur	Return the blur level for shadows.	Try
ShadowOffsetX	Return the horizontal distance of the shadow from the shape.	Try
ShadowOffsetY	Return 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
lineCap	Set or return the style of end caps of line.	Try
lineJoin	Return the type of corner created, when two lines meet, by using the lineJoin property.	Try
lineWidth	Return the width of the line (thickness of the line).	Try
miterLimit	It 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
font	Change the present font family of the Text content of the <canvas> element.	Try
textAlign	Return the current alignment for text content, according to the anchor point.	Try
textBaseline	Return 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
width	It is used to specify the width of the <canvas> in terms of pixels.	Try
height	It 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

Suggest improvement

SVG Property Complete Reference

HTML Exercises, Practice Questions and Solutions

Share your thoughts in the comments

HTML List

HTML Graphics

HTML Tutorial References