Skip to content
Related Articles

Related Articles

Improve Article

HTML Canvas Basics

  • Difficulty Level : Hard
  • Last Updated : 20 Sep, 2021
Geek Week

Example: This example illustrates the use of canvas with a linear gradient & stroke style text in HTML.

HTML




<html>
  
<body>
    <canvas id="gfg" 
            width="300px" 
            height="100px" 
            style="border:1px solid #d3d3d3;"
    </canvas>
    <script>
        var g = document.getElementById("gfg");
        var geeks = g.getContext("2d");
        var 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:

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: 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:

We will see examples of the various shapes using Canvas.

Example 1: This example shows the HTML Canvas to draw a circle.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <canvas id="GFG" 
            width="400" 
            height="200" 
            style="border:2px solid #d3d3d3;"
    </canvas>
    <script>
        var g = document.getElementById("GFG ");
        var geeks = g.getContext("2d ");
        geeks.beginPath();
        geeks.arc(200, 100, 50, 0, 2 * Math.PI);
        geeks.stroke();
    </script>
</body>
  
</html>

Output:



Example 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>
        var g = document.getElementById("GFG");
        var geeks = g.getContext("2d");
        geeks.font = "30px Arial";
        geeks.fillText("GeeksForGeeks", 170, 50);
    </script>
</body>
  
</html>

Output:

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>
        var G = document.getElementById("GFG");
        var geeks = G.getContext("2d");
        var 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:

Example 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=
         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() {
        var g = document.getElementById("gfg");
        var geeks = g.getContext("2d");
        var img = document.getElementById("image");
        geeks.drawImage(img, 0, 0);
    }
    </script>
</body>
  
</html>

Output:



Example 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>
        var g = document.getElementById("GFG");
        var geeks = g.getContext("2d");
        geeks.shadowBlur = 20;
        geeks.shadowColor = "yellow";
        geeks.fillStyle = "red";
        geeks.fillRect(30, 20, 100, 80);
    </script>
</body>
</html>

Output:

Example 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>
        var g = document.getElementById("GFG");
        var geeks = g.getContext("2d");
        geeks.rotate(20 * Math.PI / 180);
        geeks.fillRect(100, 20, 100, 50);
    </script>
</body>
</html>

Output:

Example 7: In this example, we have used the translate() method to remaps the (0,0) position on the canvas.

HTML




<!DOCTYPE html>
<html>
<body>
    <canvas id="GFG" 
            width="300" 
            height="150;">
      </canvas>
    <script>
        var g = document.getElementById("GFG");
        var geeks = g.getContext("2d");
        geeks.fillRect(10, 10, 100, 50);
        geeks.translate(80, 90);
        geeks.fillRect(10, 10, 100, 50);
    </script>
</body>
</html>

Output:

Example 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>
        var g = document.getElementById("GFG");
        var 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:

Creating 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:

  1. setInterval(callback, time): This method repeatedly executes the supplied code after a given time.
  2. 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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :