HTML Canvas Complete Reference Last Updated : 23 Jul, 2025 Suggest changes Share 4 Likes Like 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 ReferenceColors, Styles, and Shadows Properties and MethodsPropertiesDescriptionfillStyleReturn the color, gradient, or pattern used to fill the drawing.strokeStyleReturn the stroke of color, gradient, or pattern used in the drawing.shadowColorSet to a string representing a CSS color value, which we want as shadow color.shadowBlurReturn the blur level for shadows.ShadowOffsetXReturn the horizontal distance of the shadow from the shape. ShadowOffsetYReturn the vertical distance of the shadow from the shape.MethodsDescriptioncreateLinearGradient()Gradient can be used to fill different colors in rectangles, circles, lines, text, etccreatePattern()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 PropertiesPropertiesDescriptionlineCapSet or return the style of end caps of line. lineJoinReturn the type of corner created, when two lines meet, by using the lineJoin property.lineWidthReturn the width of the line (thickness of the line). miterLimitIt is used to or returns the maximum miter length.Rectangles MethodsMethodsDescriptionrect()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 MethodsMethodsDescriptionfill()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 canvasclip()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 canvasbezierCurveTo()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 MethodsMethods Descriptionscale()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 matrixsetTransform()It is used to replace the current transformation matrixText Properties and MethodsPropertiesDescriptionfontChange the present font family of the Text content of the <canvas> element. textAlignReturn the current alignment for text content, according to the anchor point. textBaselineReturn the baseline of the current text. Methods DescriptionfillText()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 MethodsPropertiesDescriptionwidthIt is used to specify the width of the <canvas> in terms of pixels. heightIt is used to specify the height of the <canvas> element in terms of pixels. Methods DescriptioncreateImageData()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 MethodsPropertiesDescriptionglobalAlpha set or return the current alpha or transparency value of the drawing. MethodsDescriptiondrawImage()It is used to display an image or video on canvas. Create Quiz S sameergeeksforgeeks Follow 4 Article Tags : Web Technologies HTML HTML5 HTML-Canvas Explore HTML BasicsHTML Introduction4 min readHTML Editors4 min readHTML Basics7 min readStructure & ElementsHTML Elements4 min readHTML Attributes7 min readHTML Headings3 min readHTML Paragraphs3 min readHTML Text Formatting4 min readHTML Block and Inline Elements3 min readHTML Charsets4 min readListsHTML Lists3 min readHTML Ordered Lists5 min readHTML Unordered Lists4 min readHTML Description Lists3 min readVisuals & MediaHTML Colors11 min readHTML Links Hyperlinks2 min readHTML Images7 min readHTML Favicon4 min readHTML Video4 min readLayouts & DesignsHTML Tables9 min readHTML Iframes4 min readHTML Layout4 min readHTML File Paths3 min readProjects & Advanced TopicsHTML Forms4 min readHTML5 Semantics5 min readHTML URL Encoding4 min readHTML Responsive Web Design11 min readTop 10 Projects For Beginners To Practice HTML and CSS Skills8 min readTutorial ReferencesHTML Tags - A to Z List5 min readHTML Attributes Complete Reference8 min readHTML Global Attributes5 min readHTML5 Complete Reference8 min readHTML5 MathML Complete Reference3 min readHTML DOM Complete Reference15+ min readHTML DOM Audio/Video Complete Reference2 min readSVG Element Complete Reference5 min readSVG Attribute Complete Reference8 min readSVG Property Complete Reference7 min readHTML Canvas Complete Reference4 min read My Profile ${profileImgHtml} My Profile Edit Profile My Courses Join Community Transactions Logout Like