Here’s a list of popular JavaScript graphic libraries, categorized by their main focus:
🖼️ 2D Graphics Libraries
-
Canvas API – Native 2D drawing API in HTML5.
-
SVG.js – Lightweight library for manipulating and animating SVG.
-
Paper.js – Vector graphics scripting framework that works well for artistic and interactive graphics.
-
Fabric.js – Powerful canvas library for creating complex canvas applications with interactivity.
-
Konva.js – Framework for canvas-based drawings with layers and event handling.
-
Two.js – A two-dimensional drawing API that supports SVG, Canvas, and WebGL renderers.
JavaScript Canvas API – Native 2D Drawing in HTML5
The Canvas API is a core part of HTML5, providing a powerful and flexible way to draw graphics directly in the browser using JavaScript. Unlike vector-based formats like SVG, the canvas is bitmap-based, meaning it deals with pixels and is well-suited for rendering images, creating games, drawing graphs, and handling real-time animations.
What Is the Canvas API?
The Canvas API allows developers to draw shapes, text, images, and animations on a <canvas> HTML element. This canvas is essentially a blank drawing board that JavaScript can control. You can draw lines, rectangles, circles, and even more complex paths, control colors and gradients, and animate changes over time.
It’s a low-level API, meaning it's extremely flexible but also requires more code than higher-level libraries. This gives developers complete control over rendering and performance.
Key Features of the Canvas API
-
2D Drawing Context – The getContext('2d') method gives access to a 2D rendering context.
-
Pixel Manipulation – You can access and manipulate individual pixels.
-
Text and Image Rendering – Includes APIs to render text and import images.
-
Transforms and Compositing – Supports scale, rotate, and blend modes.
-
Performance – Canvas is optimized for frequent updates, ideal for animations and games.
Example: Drawing a Simple Graph with Canvas
Here’s a basic example of drawing a 2D line graph using the Canvas API.
HTML + JavaScript Code
<!DOCTYPE html>
<html>
<head>
<title>Canvas Line Graph</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Sample data points
const data = [20, 50, 80, 60, 90, 120, 100];
// Draw axes
ctx.beginPath();
ctx.moveTo(40, 10);
ctx.lineTo(40, 260);
ctx.lineTo(480, 260);
ctx.strokeStyle = "#000";
ctx.stroke();
// Plot data
ctx.beginPath();
ctx.moveTo(40, 260 - data[0]);
for (let i = 1; i < data.length; i++) {
ctx.lineTo(40 + i * 60, 260 - data[i]);
}
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.stroke();
// Draw data points
ctx.fillStyle = "red";
for (let i = 0; i < data.length; i++) {
ctx.beginPath();
ctx.arc(40 + i * 60, 260 - data[i], 4, 0, Math.PI * 2);
ctx.fill();
}
</script>
</body>
</html>
Explanation
-
The canvas is set to 500x300 pixels.
-
Axes are drawn using lines.
-
Data points are plotted as a line graph.
-
Circles mark each data point.
This simple graph demonstrates how the Canvas API can be used to render dynamic visualizations directly in the browser without any third-party libraries.
The JavaScript Canvas API is a powerful tool for developers who want complete control over rendering. It’s perfect for building games, simulations, real-time visualizations, or any kind of custom graphics. While it requires more setup than libraries like D3 or Chart.js, the flexibility and performance it offers are unmatched.
Whether you're drawing charts, building a paint app, or creating interactive animations, the Canvas API is a foundational skill for modern web developers.
Option 1: Interactive Preview (CodePen-style)
You can copy and paste the following code into an .html file and open it in any browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Line Graph</title>
<style>
body { font-family: sans-serif; padding: 20px; }
canvas { border: 1px solid #ccc; display: block; margin-top: 20px; }
</style>
</head>
<body>
<h2>Canvas Line Graph Example</h2>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const data = [20, 50, 80, 60, 90, 120, 100];
// Draw X and Y axes
ctx.beginPath();
ctx.moveTo(40, 10); // Y-axis start
ctx.lineTo(40, 260); // Y-axis end
ctx.lineTo(480, 260); // X-axis
ctx.strokeStyle = "#000";
ctx.lineWidth = 1;
ctx.stroke();
// Draw the data line
ctx.beginPath();
ctx.moveTo(40, 260 - data[0]);
for (let i = 1; i < data.length; i++) {
ctx.lineTo(40 + i * 60, 260 - data[i]);
}
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.stroke();
// Draw data points
ctx.fillStyle = "red";
for (let i = 0; i < data.length; i++) {
ctx.beginPath();
ctx.arc(40 + i * 60, 260 - data[i], 4, 0, Math.PI * 2);
ctx.fill();
}
</script>
</body>
</html>
Output :
🧾 Option 2: Download as HTML File
If you'd prefer to download it:
-
Open any text editor (Notepad, VS Code, etc.).
-
Paste the above code.
-
Save it as canvas-graph.html.
-
Open it in your browser.
JavaScript SVG.js – Lightweight Library for Manipulating and Animating SVG
In modern web development, creating scalable and interactive graphics is a common requirement for dashboards, UI components, animations, and data visualizations. SVG.js is a lightweight JavaScript library designed to simplify working with SVG (Scalable Vector Graphics). SVG, being vector-based, ensures graphics remain crisp and resolution-independent on all screen sizes — making it ideal for modern, responsive web applications.
What Is SVG.js?
SVG.js is a fast and easy-to-use library for creating and manipulating SVG elements in the DOM. Unlike using raw SVG markup or manually controlling SVG elements with plain JavaScript, SVG.js provides a clean, chainable API to draw shapes, control styling, transform elements, and animate them efficiently.
Some of the key strengths of SVG.js include:
-
Lightweight (only ~30 KB minified)
-
Chainable API for concise and readable code
-
Powerful animation support
-
Plugin architecture for extending capabilities (e.g., dragging, snapping)
-
Cross-browser compatibility
When to Use SVG.js
-
Interactive dashboards and charts
-
Custom UI widgets (sliders, knobs, gauges)
-
Animated logos or illustrations
-
Educational tools and games using vector graphics
Example: Simple Line Plot with SVG.js
Let’s demonstrate a basic line graph using SVG.js to visualize a set of data points.
HTML + JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG.js Line Graph</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2/dist/svg.min.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; }
#drawing { border: 1px solid #ccc; }
</style>
</head>
<body>
<h2>Line Graph with SVG.js</h2>
<div id="drawing"></div>
<script>
const draw = SVG().addTo('#drawing').size(500, 300);
const data = [20, 50, 80, 60, 90, 120, 100];
const xStep = 60;
const yOffset = 260;
const xOffset = 40;
// Draw axes
draw.line(xOffset, 10, xOffset, yOffset).stroke({ width: 1, color: '#000' });
draw.line(xOffset, yOffset, 480, yOffset).stroke({ width: 1, color: '#000' });
// Draw lines
let points = data.map((y, i) => [xOffset + i * xStep, yOffset - y]).flat().join(',');
draw.polyline(points)
.fill('none')
.stroke({ width: 2, color: 'blue' });
// Draw data points
data.forEach((y, i) => {
draw.circle(6)
.fill('red')
.center(xOffset + i * xStep, yOffset - y);
});
</script>
</body>
</html>
What This Code Does
-
Loads SVG.js from a CDN.
-
Sets up a drawing canvas with axes.
-
Plots a simple dataset as a line chart.
-
Marks each data point with a red circle.
This minimal setup highlights SVG.js’s clean syntax and powerful rendering capabilities. Unlike Canvas, which is pixel-based and procedural, SVG is DOM-based, meaning each element can be styled, animated, and interacted with just like HTML.
SVG.js makes working with SVG straightforward and enjoyable. Its chainable syntax simplifies code, while its native support for animation and transformations opens doors for creative, interactive design. If you're building dashboards, UI components, or engaging visuals that must scale perfectly on all screen sizes, SVG.js is a fantastic tool to add to your JavaScript toolkit.
However, you can still use the code below on your own machine:
✅ How to Use the Code
-
Open any text editor (e.g., Notepad, VS Code).
-
Paste the following code.
-
Save the file as svgjs_line_graph.html.
-
Open it in your browser to see the interactive SVG plot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG.js Line Graph</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2/dist/svg.min.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; }
#drawing { border: 1px solid #ccc; }
</style>
</head>
<body>
<h2>Line Graph with SVG.js</h2>
<div id="drawing"></div>
<script>
const draw = SVG().addTo('#drawing').size(500, 300);
const data = [20, 50, 80, 60, 90, 120, 100];
const xStep = 60;
const yOffset = 260;
const xOffset = 40;
// Draw axes
draw.line(xOffset, 10, xOffset, yOffset).stroke({ width: 1, color: '#000' });
draw.line(xOffset, yOffset, 480, yOffset).stroke({ width: 1, color: '#000' });
// Draw lines
let points = data.map((y, i) => [xOffset + i * xStep, yOffset - y]).flat().join(',');
draw.polyline(points)
.fill('none')
.stroke({ width: 2, color: 'blue' });
// Draw data points
data.forEach((y, i) => {
draw.circle(6)
.fill('red')
.center(xOffset + i * xStep, yOffset - y);
});
</script>
</body>
</html>
Output :
✅ How to Use This Paper.js Example
-
Open a text editor (like Notepad, VS Code, or Sublime Text).
-
Paste the following code into a new file.
-
Save it as paperjs_interactive_circles.html.
-
Open it in your browser to see the animated and interactive graphic.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Paper.js Interactive Circles</title>
<script type="text/javascript" src="https://unpkg.com/paper@0.12.15/dist/paper-full.min.js"></script>
<style>
canvas { width: 600px; height: 400px; border: 1px solid #ccc; display: block; margin: 20px auto; }
</style>
</head>
<body>
<h2 style="text-align:center;">Interactive Circles with Paper.js</h2>
<canvas id="myCanvas" resize></canvas>
<script type="text/paperscript" canvas="myCanvas">
// Create random circles
var circles = [];
for (var i = 0; i < 10; i++) {
var position = Point.random() * view.size;
var circle = new Path.Circle({
center: position,
radius: 30,
fillColor: new Color(Math.random(), Math.random(), Math.random(), 0.8)
});
circles.push(circle);
}
// On mouse move, find closest circle and move it
function onMouseMove(event) {
var minDist = Infinity;
var closest = null;
for (var i = 0; i < circles.length; i++) {
var dist = event.point.getDistance(circles[i].position);
if (dist < minDist) {
minDist = dist;
closest = circles[i];
}
}
if (closest) {
closest.position = event.point;
}
}
</script>
</body>
</html>
Output :
JavaScript Fabric.js – Build Complex and Interactive Canvas Apps with Ease
Fabric.js is one of the most powerful and flexible JavaScript libraries for working with the
HTML5 Canvas element. It simplifies complex canvas drawing tasks by introducing an object
model, much like how the DOM works in HTML. With Fabric.js, you can easily create, manipulate,
and interact with vector graphics on a canvas without having to deal with low-level pixel
operations.
Fabric.js supports features like object grouping, event handling, image manipulation,
text rendering, and even exporting canvas content to SVG or JSON. This makes it an ideal
choice for building interactive applications such as image editors, diagram tools,
whiteboards, and custom UI components.
Why Use Fabric.js?
Fabric.js wraps the native canvas API in a more user-friendly, object-oriented approach.
Key benefits include:
Object model for canvas elements (rectangles, circles, images, text, etc.)
Drag-and-drop and scaling/rotation support out of the box
Custom controls and events for interactive UI components
Serialization to JSON or SVG, enabling storage or export
Cross-browser compatibility with a modern, chainable API
Whether you’re building a collaborative whiteboard or a rich product configurator, Fabric.js
enables developers to achieve impressive interactivity with minimal boilerplate.
Example: Interactive Canvas with Shapes and Text
Let’s walk through a basic example where we render a rectangle, a circle, and a text object — all draggable and resizable using
Fabric.js.
HTML + JavaScript Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fabric.js Interactive Canvas</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<style>
canvas { border: 1px solid #ccc; margin: 20px auto; display: block; }
</style>
</head>
<body>
<h2 style="text-align:center;">Fabric.js Interactive Canvas Example</h2>
<canvas id="c" width="600" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('c');
// Add a rectangle
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'lightblue',
width: 100,
height: 60,
angle: 0
});
canvas.add(rect);
// Add a circle
const circle = new fabric.Circle({
radius: 40,
fill: 'orange',
left: 250,
top: 150
});
canvas.add(circle);
// Add a text label
const text = new fabric.Text('Drag Me!', {
left: 350,
top: 80,
fontSize: 24,
fill: 'green'
});
canvas.add(text);
// All objects are now interactive: draggable, resizable, and rotatable
</script>
</body>
</html>
🖼️ What This Code Produces
When opened in a browser, this code creates an HTML5 canvas with:
Each of these objects is fully interactive:
Fabric.js automatically adds interactive bounding boxes and control points to each object,
giving users an intuitive way to manipulate graphics without any extra code.
Fabric.js makes working with the HTML5 canvas not only easier but also more powerful.
By introducing a higher-level abstraction over the raw canvas API, it allows developers to
create complex, interactive applications with less effort. Whether you're building drawing
tools, games, dynamic UI components, or educational tools, Fabric.js provides a rock-solid
foundation to bring your ideas to life.
Would you like a downloadable .html file or an online preview to interact with this canvas
in your browser?
✅ How to Use This Fabric.js Example
Open any text editor (like Notepad, VS Code, etc.).
Paste the following code into a new file.
Save it as fabricjs_interactive_canvas.html.
Open it in a browser to see the interactive canvas demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fabric.js Interactive Canvas</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<style>
canvas { border: 1px solid #ccc; margin: 20px auto; display: block; }
</style>
</head>
<body>
<h2 style="text-align:center;">Fabric.js Interactive Canvas Example</h2>
<canvas id="c" width="600" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('c');
// Add a rectangle
const rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'lightblue',
width: 100,
height: 60,
angle: 0
});
canvas.add(rect);
// Add a circle
const circle = new fabric.Circle({
radius: 40,
fill: 'orange',
left: 250,
top: 150
});
canvas.add(circle);
// Add a text label
const text = new fabric.Text('Drag Me!', {
left: 350,
top: 80,
fontSize: 24,
fill: 'green'
});
canvas.add(text);
// All objects are now interactive: draggable, resizable, and rotatable
</script>
</body>
</html>
Output :
You can preview using tools like JSFiddle or CodePen!
Certainly! Here’s a 500-word article on Konva.js, complete with an example program and
explanation of the resulting graphic.
JavaScript Konva.js – Canvas Drawing with Layers and Events
Made Easy
Konva.js is a powerful JavaScript framework for drawing and animating shapes on the HTML5
Canvas element. Built with performance and simplicity in mind, Konva extends the 2D canvas
API with features such as layers, shape hit detection, and interactive event handling — making
it a go-to choice for building rich graphical applications, like diagrams, interactive games,
visual editors, and dashboards.
Why Konva.js?
The native Canvas API is low-level and procedural. You draw shapes, but once rendered, they
become part of a pixel bitmap with no retained structure. There’s no built-in way to manage
layers, detect clicks on shapes, or animate them easily. Konva.js solves all of these issues
by giving you:
Layered canvas drawing with performance-optimized redrawing
Object-based shapes like rectangles, circles, images, text, and custom paths
Event handling for clicks, touches, hovers, and more
Node transformations (scale, rotate, drag, etc.)
Animation support
Touch and mobile support
Konva.js is especially ideal when you need to manipulate multiple objects on a canvas and
respond to user interactions in a structured and efficient way.
Example: Interactive Canvas with a Rectangle and Circle
Let’s create a simple Konva.js example: a blue rectangle and an orange circle that respond to
user clicks. The circle will move when clicked, and the rectangle will change color.
💻 HTML + JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Konva.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/konva@9.2.0/konva.min.js"></script>
<style>
#container { border: 1px solid #ccc; margin: 20px auto; width: 600px; height: 400px; }
</style>
</head>
<body>
<h2 style="text-align:center;">Konva.js Interactive Drawing Example</h2>
<div id="container"></div>
<script>
const stage = new Konva.Stage({
container: 'container',
width: 600,
height: 400
});
const layer = new Konva.Layer();
stage.add(layer);
// Rectangle
const rect = new Konva.Rect({
x: 50,
y: 60,
width: 120,
height: 80,
fill: 'blue',
draggable: true
});
layer.add(rect);
// Circle
const circle = new Konva.Circle({
x: 300,
y: 150,
radius: 40,
fill: 'orange',
draggable: true
});
layer.add(circle);
// Add interaction
rect.on('click', () => {
rect.fill('green');
layer.draw();
});
circle.on('click', () => {
circle.x(circle.x() + 50);
layer.draw();
});
layer.draw();
</script>
</body>
</html>
🖼️ Output Description
When this code is opened in a browser, it renders:
A blue rectangle on the canvas that turns green when clicked.
An orange circle that moves 50 pixels to the right with each click.
Both shapes are draggable, thanks to the draggable: true property.
All of this is managed through Konva’s intuitive API and efficient layering system.
You don’t have to manually clear and redraw shapes — Konva handles it for you.
Konva.js provides a structured, interactive, and efficient alternative to the raw HTML5 Canvas
API. Its support for layers, events, and shape manipulation makes it a perfect choice for
developers creating dynamic graphic applications in the browser. Whether you’re building an
educational whiteboard, a game, or a visual editor, Konva offers the power and simplicity you
need to bring your ideas to life.
✅ How to Use This Konva.js Example
Open a text editor (like Notepad or VS Code).
Paste the code below into a new file.
Save the file as konvajs_interactive_canvas.html.
Open it in your browser to interact with the canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Konva.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/konva@9.2.0/konva.min.js"></script>
<style>
#container { border: 1px solid #ccc; margin: 20px auto; width: 600px; height: 400px; }
</style>
</head>
<body>
<h2 style="text-align:center;">Konva.js Interactive Drawing Example</h2>
<div id="container"></div>
<script>
const stage = new Konva.Stage({
container: 'container',
width: 600,
height: 400
});
const layer = new Konva.Layer();
stage.add(layer);
// Rectangle
const rect = new Konva.Rect({
x: 50,
y: 60,
width: 120,
height: 80,
fill: 'blue',
draggable: true
});
layer.add(rect);
// Circle
const circle = new Konva.Circle({
x: 300,
y: 150,
radius: 40,
fill: 'orange',
draggable: true
});
layer.add(circle);
// Add interaction
rect.on('click', () => {
rect.fill('green');
layer.draw();
});
circle.on('click', () => {
circle.x(circle.x() + 50);
layer.draw();
});
layer.draw();
</script>
</body>
</html>
Output :
JavaScript Two.js – Versatile 2D Drawing with SVG, Canvas, and
WebGL Support
Two.js is a modern JavaScript drawing library built to make 2D graphics programming easier and
more versatile across different rendering contexts. It supports SVG, Canvas, and WebGL
renderers, allowing developers to switch between output modes with minimal code changes.
This makes Two.js a fantastic tool for artists, creative coders, educators, and developers
looking to deliver smooth, dynamic graphics in the browser.
Unlike low-level APIs such as HTML5 Canvas, Two.js provides a scene graph, where shapes like
circles, lines, and polygons are objects that can be updated, grouped, transformed, and
animated over time. The API is intentionally simple and expressive, helping you focus on your
creative logic without getting bogged down in rendering details.
Why Use Two.js?
Two.js stands out for several reasons:
✅ Multi-renderer support (SVG, Canvas, WebGL)
🌀 Built-in animation loop
🧱 Scene graph with hierarchical grouping
📐 Simple vector shapes like lines, rectangles, circles, and paths
🖼️ Object-based drawing and manipulation
🧠 Great for generative art, infographics, data viz, and animations
This makes it an ideal choice for developing interactive illustrations, animated diagrams, and
cross-platform visual content.
Example: Animated Circle and Triangle with Two.js
Here’s a basic example using Two.js to render a moving circle and a spinning triangle.
💻 HTML + JavaScript Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two.js Animated Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.11/two.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#draw { display: block; margin: auto; width: 600px; height: 400px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="draw"></div>
<script>
const elem = document.getElementById('draw');
const params = { width: 600, height: 400 };
const two = new Two(params).appendTo(elem);
// Create a circle
const circle = two.makeCircle(150, 200, 40);
circle.fill = 'deepskyblue';
circle.stroke = 'black';
circle.linewidth = 2;
// Create a triangle
const triangle = two.makePolygon(400, 200, 60, 3);
triangle.fill = 'orange';
triangle.stroke = 'black';
triangle.linewidth = 2;
// Animate
let direction = 1;
two.bind('update', function (frameCount) {
// Bounce the circle left and right
circle.translation.x += 1.5 * direction;
if (circle.translation.x > 300 || circle.translation.x < 100) {
direction *= -1;
}
// Rotate the triangle
triangle.rotation += 0.03;
}).play(); // Start the animation
</script>
</body>
</html>
🎨 Output Description
This code creates a Two.js scene with:
A blue circle that moves back and forth horizontally.
An orange triangle that continuously spins around its center.
Both shapes have strokes and fill, and they animate smoothly using the built-in animation loop.
The great thing is — with just one line of configuration, you can switch the renderer:
const two = new Two({ type: Two.Types.svg }); // or .canvas, .webgl
This makes your graphics portable across rendering technologies with zero extra work.
Two.js is a flexible and modern solution for creating rich, animated 2D graphics in the browser
. With its simple syntax, scene graph architecture, and multi-renderer support, it empowers
both novices and pros to create everything from educational illustrations to real-time visual
art. Whether you want to work with SVG for scalability, Canvas for speed, or WebGL for
advanced rendering — Two.js has you covered.
✅ How to Use This Two.js Example
Open any text editor (like Notepad, VS Code, or Sublime Text).
Paste the code below into a new file.
Save the file as twojs_animated_example.html.
Open it in your browser to view the animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two.js Animated Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.11/two.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#draw { display: block; margin: auto; width: 600px; height: 400px; border: 1px solid #ccc; }
</style>
</head>
<body>
<div id="draw"></div>
<script>
const elem = document.getElementById('draw');
const params = { width: 600, height: 400 };
const two = new Two(params).appendTo(elem);
// Create a circle
const circle = two.makeCircle(150, 200, 40);
circle.fill = 'deepskyblue';
circle.stroke = 'black';
circle.linewidth = 2;
// Create a triangle
const triangle = two.makePolygon(400, 200, 60, 3);
triangle.fill = 'orange';
triangle.stroke = 'black';
triangle.linewidth = 2;
// Animate
let direction = 1;
two.bind('update', function (frameCount) {
// Bounce the circle left and right
circle.translation.x += 1.5 * direction;
if (circle.translation.x > 300 || circle.translation.x < 100) {
direction *= -1;
}
// Rotate the triangle
triangle.rotation += 0.03;
}).play(); // Start the animation
</script>
</body>
</html>
Output :
