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" >w3wiki</ 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:
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" >w3wiki</ 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 > |
Output:
Web API Canvas
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.