Web API Canvas

Last Updated : 26 Dec, 2023

Web API Canvas facilitates the Canvas API to create 2D graphics with an HTML5 element helps developers to draw and control graphics, animations, and visual content on web browsers. Its diverse drawing methods enable developers to craft a wide range of visual elements, including shapes, lines, paths, and text, offering flexibility and versatility.

Libraries

The libraries listed below are used with Canvas to simplify the canvas implementation on web pages.

Libraries	Descriptions
EaselJS	It simplifies game and graphics creation on the canvas.
Fabric.js	It excels in SVG parsing for canvas graphics.
heatmap.js	It crafts data heat maps effortlessly.
JavaScript InfoVis Toolkit	The Toolkit enhances interactive data visualizations seamlessly.
Konva.js	It boosts graphics rendering for desktop and mobile apps.
p5.js	It enables artistic expression through simple canvas drawing.
Paper.js	It facilitates vector graphics scripting on Canvas.
Phaser	It facilitates vector graphics scripting on Canvas.
Pts.js	It supports coding and visualization on Canvas and SVG.
Rekapi	It simplifies dynamic animations on Canvas.
Scrawl-canvas	Scrawl-canvas effortlessly creates and manipulates 2D canvas elements.
ZIM	It offers conveniences and controls for creative canvas coding.
Sprig	It is a beginner-friendly, open-source game library for Canvas.

Example 1: In this example, we will draw a circle using the above method and add color to it using canvas methods and properties.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <canvas id="myCanvas"
            width="200" 
            height="90" 
            style="border:1px solid #d3d3d3 "> 
        Your browser does not support the HTML canvas tag. 
    </canvas> 
  
    <script> 
        var c = document.getElementById("myCanvas"); 
        var ctx = c.getContext("2d"); 
        ctx.beginPath(); 
        ctx.arc(95, 45, 40, 0, 2 * Math.PI); 
        ctx.fillStyle = "blue"; 
        ctx.fill(); 
    </script> 
</body> 
  
</html>

Output:

Screenshot-2023-11-10-175405

Example 2: In this example, we will design a indian flag by using same above method.

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <canvas id="myCanvas" 
            width="200" 
            height="90" 
            style="border:1px solid #d3d3d3;"> 
        Your browser does not support the HTML canvas tag. 
    </canvas> 
  
    <script> 
        var c = document.getElementById("myCanvas"); 
        var ctx = c.getContext("2d"); 
        ctx.beginPath(); 
        ctx.rect(0, 0, 200, 30); 
        ctx.fillStyle = "orange"; 
        ctx.fill(); 
        ctx.beginPath(); 
        ctx.rect(0, 30, 200, 30); 
        ctx.fillStyle = "white"; 
        ctx.fill(); 
        ctx.beginPath(); 
        ctx.rect(0, 60, 200, 30); 
        ctx.fillStyle = "green"; 
        ctx.fill(); 
        ctx.beginPath(); 
        ctx.arc(95, 45, 14, 0, 2 * Math.PI); 
        ctx.strokeStyle = "blue"; 
        ctx.stroke(); 
    </script> 
</body> 
  
</html>