JavaScript

coding learning websites codepractice

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 Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JS Graphics


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.

What is JS Graphics?

JS Graphics refers to using JavaScript to render and manipulate graphics on a web page. This can be done in multiple ways:

  1. Canvas API – Low-level pixel-based drawing.

  2. SVG (Scalable Vector Graphics) – Resolution-independent shapes.

  3. 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.

Basics of Drawing Graphics in JavaScript

Using Canvas

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().

Using SVG

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.

Drawing Shapes and Paths

Rectangle

ctx.fillStyle = "orange";
ctx.fillRect(50, 50, 100, 50);

Line

ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(200, 150);
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.stroke();

Polygon

ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(300, 100);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.fillStyle = "purple";
ctx.fill();
ctx.stroke();

Colors, Gradients, and Patterns

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);

Animations

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.

Interactivity

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.

Libraries for JS Graphics

Instead of building everything from scratch, developers use graphics libraries:

  1. p5.js – Simplifies Canvas and animation, inspired by Processing.

  2. Three.js – For 3D graphics using WebGL.

  3. Paper.js – Vector graphics and path manipulation.

  4. Fabric.js – Canvas-based graphic objects with interactive manipulation.

These libraries allow faster development and advanced effects without handling low-level pixel operations.

Practical Examples

Drawing Multiple Shapes

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.

Simple Interactive Circle

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.

Summary of the Tutorial

  • 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.


Practice Questions

  1. Create a canvas and draw a blue rectangle at position (50, 50) with width 150 and height 100.

  2. Draw a red line from (50, 200) to (400, 200) with a line width of 5.

  3. Draw a green circle with a black border at (250, 150) and radius 50.

  4. Draw a polygon with three points forming a triangle and fill it with purple color.

  5. Create a linear gradient from red to yellow and apply it to a rectangle.

  6. Animate a square moving horizontally across the canvas and looping back to the start when it reaches the edge.

  7. Capture mouse clicks on the canvas and draw a small circle at the clicked position.

  8. Make an interactive canvas where moving the mouse draws a circle following the cursor.

  9. Draw multiple shapes (rectangle, circle, and line) in a single scene, demonstrating layering.

  10. Using a library like p5.js, create a canvas that draws multiple colored circles at random positions each time the page loads.


JavaScript

online coding class codepractice

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 Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Go Back Top