JavaScript - Graphics

---

---

In JavaScript, graphics can be created using the Canvas API. However, developers can also use some other libraries, like p5.js, chart.js, pllotly.js, Google charts, etc., to draw various graphics and charts.

Here, we will explore some of these libraries and learn about them with help of some examples

WebGL

WebGL allows developers to create graphics from scratch using the code, and integrate it in the web pages. It operates directly with the HTML element, allowing for GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.

WebGL allows to development of a wide range of applications from 2D games to complex 3D visualization applications. Also, it is supported by most modern browsers, which makes it a go-to choice for developers to develop graphics.

Example

In the code below, we have used the element to create a canvas and accessed it in the JavaScript using the id. Next, we used the getCContext() method to get the context of the WebGL. If it is not supported by the browser, the getContext() method returns undefined value.

In the initiateShader() function, we compile the shader source code into shaders, attach those shaders to a program, and then link the program so it can be used in a WebGL context. The loadShader() function loads and compiles the shader code.

In the drawScene() function, we use the useProgram() method by passing the graphics info as a parameter to draw a triangle on the canvas. In the output, you can observe the red triangle on the black canvas.

   
 JavaScript - Graphics (WebGL) 
   
   
 
   

P5.js

P5.js is also a very popular graphics library used to create various shapes by writing the code. It also allows us to animate the shapes and make them visually more appealing. However, it is not limited to shape but it also allows to interact with audio, video, etc.

Lets understand the usage of P5.js with the example below.

Example

In the code below, the program starts with two main functions: setup() and draw(). The setup() function is run once when the program starts, and it's used for initial setup tasks. The draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called, making it ideal for animations.

In the setup() function, we create a canvas and draw the circle on that. In the draw() function, we continuously change the position of the circles by redrawing them. The output of the below code shows the moving circle.

Plotly.js

Plotly.js is a JavaScript library that allows developers to create various types of high-quality graphs and visualizations with ease. We can use it to draw statistical charts, 3d charts, etc. The Plotly.js library can be integrated into various programming languages and frameworks.

Example

In the code below, we have created the trace1 object, which contains the x, y, and type properties. After that, we used the newPlot() method to create a line chart using the given data points.

   
 JavaScript - Graphics 
   
 
   
   

Chart.js

Chart.js is also a JavaScript library that allows developers to draw various kinds of charts. It supports six chart types: line, bar, radar, doughnut, pie, and polar area.

Example

In the code below, we used the Chart() constructor from the chart.js library to create a new bar chart.

   
 JavaScript - Graphics 
   
   
   

Google Charts

Google Charts library also provides various types of charts, including the ones below.

• Scatter Chart
• Bar / Column Chart
• Org Chart
• Area Chart
• Donut Chart
• Map / Geo Chart
• Line Chart
• Pie Chart

However, there are some more JavaScript libraries like D3.js available on the internet that can be used to draw various kinds of graphics.