@antv/g-canvas

What is @antv/g-canvas?

@antv/g-canvas is a 2D rendering engine for AntV, a suite of data visualization solutions. It provides a high-performance canvas rendering environment for creating complex visualizations and graphics.

What are @antv/g-canvas's main functionalities?

Basic Shape Drawing

This feature allows you to draw basic shapes like circles, rectangles, and lines on the canvas.

const { Canvas } = require('@antv/g-canvas');
const canvas = new Canvas({ container: 'container', width: 600, height: 400 });
const circle = canvas.addShape('circle', { attrs: { x: 100, y: 100, r: 50, fill: 'red' } });

Event Handling

This feature enables event handling for shapes, allowing you to add interactivity to your graphics.

circle.on('click', () => { console.log('Circle clicked!'); });

Animation

This feature allows you to animate properties of shapes, making your visualizations more dynamic.

circle.animate({ r: 100 }, { duration: 1000, easing: 'easeLinear' });

Other packages similar to @antv/g-canvas

fabric

Fabric.js is a powerful and simple JavaScript HTML5 canvas library. It provides an interactive object model on top of the canvas element, making it easy to create complex shapes, animations, and interactions. Compared to @antv/g-canvas, Fabric.js offers a more extensive set of features for object manipulation and interaction.

konva

Konva is a 2D canvas library for creating desktop and mobile applications. It provides a high-level API for working with shapes, layers, and animations. Konva is similar to @antv/g-canvas in terms of performance and ease of use but offers additional features like layer management and pixel-level hit detection.

paper

Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph/Document Object Model and a well-designed, consistent API. Paper.js is more focused on vector graphics and provides advanced features like boolean operations on paths, which are not available in @antv/g-canvas.

README

English | 简体中文

g-canvas

• A canvas library which providing 2d draw for AntV.

✨ Features

• Powerful and scalable rendering capability with built-in basic Graphics.
• Excellent rendering performance and supports visualization scenarios with large amounts of data.
• Complete simulation of browser DOM events, and no difference from native events.
• Smooth animation implementation and rich configuration interfaces.

📦 Install

$ npm install @antv/g-canvas --save

🔨 Usage

<div id="c1"></div>

import { Canvas } from '@antv/g-canvas';

const canvas = new Canvas({
  container: 'c1',
  width: 500,
  height: 500,
});

const group = canvas.addGroup();
group.addShape('circle', {
  attrs: {
    x: 100,
    y: 100,
    r: 50,
    fill: 'red',
    stroke: 'blue',
    lineWidth: 5,
  },
});