In this article, we will know HTML Canvas Basics, and their implementation through the examples.
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. The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content.
Syntax:
<canvas> Content... </canvas>
It is recommended to have an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.
Supported Properties: The properties like Colors, Styles, Shadows, Line Styles, Rectangles, Paths, Transformations, Text, Pixel Manipulation, Compositing & Image Drawing, are the global attributes that are supported by all the canvas tags. Please refer to the HTML Canvas Complete Reference article for the details.
Example 1: This example illustrates the use of canvas with a linear gradient & stroke-style text in HTML.
HTML <!DOCTYPE html> <html> <body> <canvas id="gfg" width="300px" height="100px" style="border:1px solid #d3d3d3;"> </canvas> <script> let g = document.getElementById("gfg"); let geeks = g.getContext("2d"); let gradient = geeks.createLinearGradient(1, 4, g.width, 2); gradient.addColorStop("0", "green"); gradient.addColorStop("0.4", "yellow"); gradient.addColorStop("1.0", "aqua"); geeks.font = "40px sans-serif"; geeks.fillStyle = "red"; geeks.strokeStyle = gradient; geeks.strokeText("GeeksforGeeks", 10, 60); </script> </body> </html> Output:
HTML canvas with a linear gradientExample 2: The following code demonstrates the empty canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="400" height="200" style="border:2px solid #000000;"> </canvas> </body> </html>
Output:
HTML empty canvasThere are various shapes that can be possible to draw using Canvas, which are discussed below.
Example 1: This example shows the HTML Canvas to draw a circle.
HTML <!DOCTYPE html> <html> <head> <title>Circle Drawing</title> </head> <body> <canvas id="GFG" width="400" height="200" style="border:2px solid #d3d3d3;"></canvas> <script> let g = document.getElementById("GFG"); let geeks = g.getContext("2d"); geeks.beginPath(); geeks.arc(200, 100, 50, 0, 2 * Math.PI); geeks.stroke(); </script> </body> </html> Output:
Drawing Circle with HTML CanvasExample 2: In this example, we will write a text using HTML Canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="GFG" width="600" height="200" style="border:1px solid #d3d3d3;"> </canvas> <script> let g = document.getElementById("GFG"); let geeks = g.getContext("2d"); geeks.font = "30px Arial"; geeks.fillText("GeeksForGeeks", 170, 50); </script> </body> </html> Output:
Writing text with HTML Canvas
Example 3: This example illustrates the use of linear-gradient property in HTML Canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="GFG" width="400" height="200" style="border:2px solid #d3d3d3;"> </canvas> <script> let G = document.getElementById("GFG"); let geeks = G.getContext("2d"); let grd = geeks.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "yellow"); grd.addColorStop(1, "grey"); geeks.fillStyle = grd; geeks.fillRect(50, 50, 300, 80); </script> </body> </html> Output:
HTML Canvas with linear-gradientExample 4: In this example, we will draw the image by using the <canvas> tag.
HTML <!DOCTYPE html> <html> <body> <p>Image to use:</p> <img id="image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210916184234/gfg3-300x300.png" alt="GeeksforGeeks logo" width="250" height="200"> <p>Canvas to fill:</p> <canvas id="gfg" width="300" height="300" style="border:1px solid #d3d3d3; "> </canvas> <p> <button onclick="gfg()"> Click to Try </button> </p> <script> function gfg() { let g = document.getElementById("gfg"); let geeks = g.getContext("2d"); let img = document.getElementById("image"); geeks.drawImage(img, 0, 0); } </script> </body> </html> Output:
Drawing image with tagExample 5: This example demonstrates the use of the Shadow blur property in HTML Canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="GFG" width="500" height="250" ;> </canvas> <script> let g = document.getElementById("GFG"); let geeks = g.getContext("2d"); geeks.shadowBlur = 20; geeks.shadowColor = "yellow"; geeks.fillStyle = "red"; geeks.fillRect(30, 20, 100, 80); </script> </body> </html> Output:
HTML Canvas with Shadow blur propertyExample 6: In this example, we will use rotate() method in the HTML Canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="GFG" width="300" height="150;"> </canvas> <script> let g = document.getElementById("GFG"); let geeks = g.getContext("2d"); geeks.rotate(20 * Math.PI / 180); geeks.fillRect(100, 20, 100, 50); </script> </body> </html> Output:
HTML Canvas with rotate() methodExample 7: In this example, we have used the translate() method to remap the (0,0) position on the canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="GFG" width="300" height="150;"> </canvas> <script> let g = document.getElementById("GFG"); let geeks = g.getContext("2d"); geeks.fillRect(10, 10, 100, 50); geeks.translate(80, 90); geeks.fillRect(10, 10, 100, 50); </script> </body> </html> Output:
HTML Canvas with translate() methodExample 8: This example illustrates the use of the transform() method in HTML Canvas.
HTML <!DOCTYPE html> <html> <body> <canvas id="GFG" width="300" height="150;"> </canvas> <script> let g = document.getElementById("GFG"); let geeks = g.getContext("2d"); geeks.fillStyle = "yellow"; geeks.fillRect(0, 0, 250, 100) geeks.transform(1, 0.5, -0.5, 1, 30, 10); geeks.fillStyle = "grey"; geeks.fillRect(0, 0, 250, 100); geeks.transform(1, 0.5, -0.5, 1, 30, 10); geeks.fillStyle = "black"; geeks.fillRect(0, 0, 250, 100); </script> </body> </html> Output:
HTML Canvas with transform() methodCreating Animation in HTML Canvas: JavaScript helps to simulate good animation over an HTML5 canvas. Two important JavaScript methods which can be used to animate an image on a canvas:
- setInterval(callback, time): This method repeatedly executes the supplied code after a given time.
- setTimeout(callback, time): This method executes the supplied code only once after a given time.
Supported Browser:
- Google Chrome 93.0
- Microsoft Edge 93.0
- IE 11.0
- Firefox 92.0
- Opera 78.0
- Safari 14.1
Similar Reads
HTML Canvas Tutorial HTML Canvas facilitates the element <canvas> to draw graphics on Canvas with the help of JavaScript. HTML Canvas offers various methods for drawing different shapes and lines. The HTML Canvas is a rectangular area defined via height and width on an HTML page. By default, HTML Canvas has no bor
3 min read
HTML Canvas Basics In this article, we will know HTML Canvas Basics, and their implementation through the examples. 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
5 min read
HTML Canvas Drawing HTML Canvas Drawing facilitates the <canvas> element, along with Properties that help to draw on the HTML canvas. The various properties, attributes & events can be used with <canvas> element. Utilizing JavaScript, we can manipulate the canvas element to draw shapes, paths, and image
2 min read
HTML Canvas Coordinates In this article, we will see the concept of coordinates in HTML Canvas Coordinates. In HTML canvas, the coordinates are very important because, with the understanding of these coordinates, we can easily draw any shapes or lines on the canvas. x-axis coordinates define the coordinates in horizontal a
2 min read
HTML Canvas Lines In this article, we will learn how to make lines in different styles on Canvas in HTML. There are various methods used to draw a line on canvas like beginPath(), moveTo(), lineTo(), and stroke(). There are also various properties like lineWidth, strokeStyle, etc. can be used to give styles to a line
3 min read
HTML Canvas Shapes HTML Canvas Shapes facilitate different shapes, i.e., rectangles, triangles, lines, arcs, and curves to draw on the HTML Canvas. For instance, to draw the line in the Canvas, the path will be used that implements the beginPath() method. Setting the path's starting point is achieved with moveTo(), w
3 min read
HTML Canvas Rectangles The HTML Canvas Rectangles facilitate the rect() method to draw rectangles on canvas. There are various attributes in the rect(x, y, width, height) method such as x and y defining the coordinates of the upper-left corner of the rectangle, width defining the width of the rectangle, and height definin
4 min read
HTML Canvas Circles HTML Canvas Circles facilitates the arc() method to make a circle where 0 is defined as the start angle and the end angle is 2*PI. The stroke() method is used to draw an outline of the circle and fill() is used to draw a filled circle we can give color with the fillStyle property. stroke() Method Cr
2 min read
HTML Canvas Curves HTML Canvas Curves facilitate the arc() method for making a circle or a part of a circle on the canvas. There are various attributes in the arc(x, y, r, s, e) method such as x and y defining the coordinates of the center of the circle, r defining the radius, s defining the start angle, and e definin
2 min read
HTML Canvas Gradients HTML Canvas Gradients is used to give a gradient effect on Canvas with the help of JavaScript. The different shapes, such as rectangles, circles, lines, text, etc, can be filled with Gradients. To create a gradient on Canvas, we can use two techniques, Linear Gradient and Radial Gradient. Linear Gra
3 min read