-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
JavaScript graphics allow developers to create visual content directly in the browser, from simple shapes and images to complex visualizations and interactive animations. While HTML5 Canvas provides the basic drawing surface, JavaScript graphics libraries and APIs make it easier to handle shapes, paths, colors, transformations, and animations efficiently.
JS Graphics refers to using JavaScript to render and manipulate graphics on a web page. This can be done in multiple ways:
Canvas API – Low-level pixel-based drawing.
SVG (Scalable Vector Graphics) – Resolution-independent shapes.
Graphics Libraries – Provide tools and functions for easier drawing and animations.
The goal of JS Graphics is to create interactive and visually appealing web elements, such as charts, diagrams, games, simulations, or artistic designs.
As covered in the JS Canvas tutorial, Canvas provides a 2D context:
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);
fillRect()
draws a rectangle.
Canvas allows drawing lines, circles, polygons, and images.
Animations can be created using requestAnimationFrame()
.
SVG allows drawing vector graphics that scale without losing quality:
<svg width="400" height="200">
<circle cx="100" cy="100" r="50" fill="green" stroke="black" stroke-width="3"/>
</svg>
cx
and cy
define the center of the circle.
r
is the radius.
fill
and stroke
define color.
SVG elements can be manipulated via JavaScript for interactivity.
ctx.fillStyle = "orange";
ctx.fillRect(50, 50, 100, 50);
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(200, 150);
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(300, 100);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.fillStyle = "purple";
ctx.fill();
ctx.stroke();
JavaScript graphics allow rich visual styles:
fillStyle
– solid colors or gradients
strokeStyle
– outlines
lineWidth
– thickness
createLinearGradient()
– horizontal/vertical gradients
createRadialGradient()
– circular gradients
Example:
let gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(50, 200, 200, 100);
JS Graphics allows dynamic visuals:
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "blue";
ctx.fillRect(x, 50, 50, 50);
x += 2;
if (x > canvas.width) x = -50;
requestAnimationFrame(animate);
}
animate();
clearRect()
clears previous frames.
Objects can be moved, rotated, or scaled over time.
You can capture mouse and keyboard events to make graphics interactive:
canvas.addEventListener("mousemove", function(event){
let rect = canvas.getBoundingClientRect();
let mouseX = event.clientX - rect.left;
let mouseY = event.clientY - rect.top;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(mouseX, mouseY, 20, 0, 2 * Math.PI);
ctx.fill();
});
Circles follow the mouse cursor.
Interactivity can be expanded for games, visualizations, or drawing apps.
Instead of building everything from scratch, developers use graphics libraries:
p5.js – Simplifies Canvas and animation, inspired by Processing.
Three.js – For 3D graphics using WebGL.
Paper.js – Vector graphics and path manipulation.
Fabric.js – Canvas-based graphic objects with interactive manipulation.
These libraries allow faster development and advanced effects without handling low-level pixel operations.
ctx.fillStyle = "green";
ctx.fillRect(20, 20, 100, 50);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.strokeRect(20, 20, 100, 50);
ctx.beginPath();
ctx.arc(200, 50, 30, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();
ctx.stroke();
Multiple shapes can be combined to create scenes or UI elements.
canvas.addEventListener("click", function(event){
let rect = canvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.fill();
});
Click anywhere to draw a circle dynamically.
Forms the basis for interactive graphics applications.
JS Graphics includes Canvas, SVG, and libraries for creating visual content.
Basic shapes: rectangles, circles, lines, and polygons.
Colors, gradients, and patterns enhance visuals.
Animations are possible using requestAnimationFrame()
.
Interactivity is achieved via mouse and keyboard events.
Libraries like p5.js, Paper.js, and Fabric.js simplify graphics programming.
JS Graphics is essential for visualizations, games, animations, and interactive web applications.
Create a canvas and draw a blue rectangle at position (50, 50) with width 150 and height 100.
Draw a red line from (50, 200) to (400, 200) with a line width of 5.
Draw a green circle with a black border at (250, 150) and radius 50.
Draw a polygon with three points forming a triangle and fill it with purple color.
Create a linear gradient from red to yellow and apply it to a rectangle.
Animate a square moving horizontally across the canvas and looping back to the start when it reaches the edge.
Capture mouse clicks on the canvas and draw a small circle at the clicked position.
Make an interactive canvas where moving the mouse draws a circle following the cursor.
Draw multiple shapes (rectangle, circle, and line) in a single scene, demonstrating layering.
Using a library like p5.js, create a canvas that draws multiple colored circles at random positions each time the page loads.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts