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 <canvas> 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 <canvas> 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.
<html><body><h2> JavaScript -Graphics(WebGL)</h2><canvas id="webgl-canvas" width="600" height="400"></canvas><div id="error"></div><script>// Get the canvas element and its WebGL contextvar canvas = document.getElementById('webgl-canvas');let errorDiv = document.getElementById('error');// Get context of webglvar gl = canvas.getContext('webgl');if(!gl){
console.error('Your browser may not support WebGL.');}// Vertex shader programvar vsSource =`
attribute vec4 aVertexPosition;
void main(void) {
gl_Position = aVertexPosition;
}
;// Fragment shader programvar fsSource =
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
`;functioninitShaderProgram(gl, vsSource, fsSource){const vertexShader =loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader =loadShader(gl, gl.FRAGMENT_SHADER, fsSource);// Create the shader programconst shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);// If creating the shader program failed, alertif(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)){alert('Unable to initialize the shader program: '+ gl.getProgramInfoLog(shaderProgram));returnnull;}return shaderProgram;}functionloadShader(gl, type, source){const shader = gl.createShader(type);// Send the source to the shader object
gl.shaderSource(shader, source);// Compile the shader program
gl.compileShader(shader);// See if it compiled successfullyif(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
error.innerHTML ='An error occurred compiling the shaders: '+ gl.getShaderInfoLog(shader);
gl.deleteShader(shader);returnnull;}return shader;}// Initialize a shader program; this is where all the lighting// for the vertices and subsequently the creation of the// geometry and colors will be established.var shaderProgram =initShaderProgram(gl, vsSource, fsSource);// Collect all the info needed to use the shader program.// Look up which attribute our shader program is using// for aVertexPosition and look up uniform locations.var programInfo ={
program: shaderProgram,
attribLocations:{
vertexPosition: gl.getAttribLocation(shaderProgram,'aVertexPosition'),},};// Vertices of the trianglevar positions =[0.0,1.0,// Vertex 1 (X, Y)-1.0,-1.0,// Vertex 2 (X, Y)1.0,-1.0,// Vertex 3 (X, Y)];var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(positions), gl.STATIC_DRAW);// Draw the scenefunctiondrawScene(gl, programInfo, buffers){
gl.clearColor(0.0,0.0,0.0,1.0);// Clear to black, fully opaque
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(programInfo.program);// Tell WebGL how to pull out the positions from the position// buffer into the vertexPosition attribute.{const numComponents =2;// pull out 2 values per iterationconst type = gl.FLOAT;// the data in the buffer is 32bit floatsconst normalize =false;// don't normalizeconst stride =0;// how many bytes to get from one set to the nextconst offset =0;// how many bytes inside the buffer to start from
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);}// Draw the triangle.
gl.drawArrays(gl.TRIANGLES,0,3);}drawScene(gl, programInfo, positionBuffer);</script></body></html></pre>
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.
<html><head><title>p5.js Example</title><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script></head><body><script>// Define variables for the circle's propertieslet x, y;// Positionlet dx =2;// Speed and direction on x-axislet dy =-2;// Speed and direction on y-axislet radius =50;// Circle's radiusfunctionsetup(){// Create a canvas that fills the windowcreateCanvas(windowWidth, windowHeight);// Initialize circle's position to center of the canvas
x = width /2;
y = height /2;}functiondraw(){background(220);// Fill the background with a light gray color// Draw a circle with a random fill colorfill(random(255),random(255),random(255));ellipse(x, y, radius *2);// Circle diameter is twice the radius// Update the position of the circle
x += dx;
y += dy;// Check for bouncingif(x + radius > width || x - radius <0){
dx =-dx;// Reverse direction on the x-axis}if(y + radius > height || y - radius <0){
dy =-dy;// Reverse direction on the y-axis}}// Resize the canvas when the window is resizedfunctionwindowResized(){resizeCanvas(windowWidth, windowHeight);}</script></body></html></pre>
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.
<html><body><h2> JavaScript - Graphics </h2><div id ="plotlyChart" style="width:600px;height:400px;"></div><script src="https://cdn.plot.ly/plotly-latest.min.js"></script><script>// Create a simple line chartvar trace1 ={
x:[1,2,3,4],
y:[10,15,13,17],
type:'scatter'};var data =[trace1];
Plotly.newPlot('plotlyChart', data);</script></body></html></pre>
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.
<html><body><h2> JavaScript - Graphics </h2><canvas id="chartjsBarChart" width="600" height="400"></canvas><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><script>// Get Canvas contextvar ctx = document.getElementById('chartjsBarChart').getContext('2d');// Create a chartvar myChart =newChart(ctx,{
type:'bar',
data:{
labels:['Red','Blue','Yellow','Green','Purple'],
datasets:[{
label:'# of Votes',
data:[1,6,3,5,2],
backgroundColor:['rgba(255, 99, 132, 0.2)','rgba(54, 162, 235, 0.2)','rgba(255, 206, 86, 0.2)','rgba(75, 192, 192, 0.2)','rgba(153, 102, 255, 0.2)'],
borderColor:['rgba(255, 99, 132, 1)','rgba(54, 162, 235, 1)','rgba(255, 206, 86, 1)','rgba(75, 192, 192, 1)','rgba(153, 102, 255, 1)'],
borderWidth:1}]},
options:{
scales:{
y:{
beginAtZero:true}}}});</script></body></html></pre>
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.
Leave a Reply