DEV Community

Cover image for Embed a Geometry Canvas in Your Webpage with One Line of Code
Luhui Dev
Luhui Dev

Posted on

Embed a Geometry Canvas in Your Webpage with One Line of Code

#webdev #ai #ai4math #opensource

Introduction

Many products actually need geometry capabilities.

For example:

  • Online education platforms need to display geometric shapes in courses

  • Question bank systems need to create diagrams for math problems

  • AI Tutors need to draw diagrams dynamically when explaining problems

  • Lesson plan and courseware tools need to generate mathematical graphics

But here's the problem:

A geometry canvas is actually a very complex software system.

If you develop it yourself, you'll quickly find yourself dealing with a pile of problems:

  • Geometric object management (points, lines, circles, angles, curves)

  • Intersection calculation and constraint computation

  • Graphics rendering and drag-and-drop interaction

  • Multi-canvas management

  • File format and sharing system

All these capabilities combined basically constitute a complete product.

The final choice for many teams is either to use static images or integrate an existing geometry system.

Recently, we did something interesting: We turned a geometry canvas into a component that can be directly embedded in webpages.

Developers only need one line of code to put a complete geometry canvas into their own products.

A Geometry Canvas That Can Be Embedded in Webpages

The Dino-GSP（大角几何）Open Platform provides an embeddable geometry canvas SDK.

Developers can embed the geometry canvas into their own web applications just like using a frontend component.

The core concept is actually quite simple:

Your webpage
   ↓
Embed geometry canvas
   ↓
Gain complete geometry capabilities
Enter fullscreen mode Exit fullscreen mode

This means:

  • No need to develop your own geometry engine

  • No need to implement geometry calculations yourself

  • No need to write complex interaction logic yourself

Just embed it and use it.

In the official capability design, Dino-GSP（大角几何）aims to become “geometry capability infrastructure”: through SDK, API, REPL, and other methods, making geometry capabilities embeddable in more products and systems.

The Simplest Way: Direct Embedding

If you just want to display a geometric figure, the simplest method is iframe embedding.

For example:

<iframe src="https://dajiaoai.com/e/33TA3484" width="800" height="600" allow="fullscreen"></iframe>
Enter fullscreen mode Exit fullscreen mode

This way you can directly embed a geometry canvas into a webpage.

Suitable scenarios include:

  • Displaying geometric figures on teaching pages

  • Embedding mathematical graphics in blog articles

  • Showing dynamic figures in online textbooks

No additional development work required.

Developer Approach: Using the SDK

If you want deeper control over the canvas, such as:

  • Dynamically loading graphics

  • Switching canvases

  • Importing files

  • Calling geometry operations

You can use the SDK integration approach.

First, install the SDK:

npm install @dajiaoai/algeo-sdk
Enter fullscreen mode Exit fullscreen mode

Then create a canvas on the page:

import { AlgeoSdk } from '@dajiaoai/algeo-sdk'

const container = document.getElementById('algeo-container')

const sdk = await AlgeoSdk.create(container, {
  initialId: '33TA3484'
})
Enter fullscreen mode Exit fullscreen mode

This creates a geometry canvas instance.

You can then operate it through the API, for example:

Load shared content:

await sdk.loadShareById('33TA3484')
Enter fullscreen mode Exit fullscreen mode

Get canvas count:

const { count } = await sdk.getSlideCount()
Enter fullscreen mode Exit fullscreen mode

Switch canvas:

await sdk.switchSlide(2)
Enter fullscreen mode Exit fullscreen mode

Developers can use the geometry canvas as a programmable component.

A Very Interesting Capability: REPL

In addition to regular APIs, Dino-GSP（大角几何）also provides a REPL interface.

Simply put, it means using commands to directly control the geometry system.

For example:

  • Define geometric objects

  • Query graphic states

  • Execute geometry operations

The REPL output is in structured text format, making it convenient for AI or Agent systems to call.

This means that in the future, not only humans can operate the canvas, but AI can also directly call geometry capabilities.

This is why we call it: AI-native geometry capability interface.

Which Products Is This Suitable For?

The embeddable geometry canvas is actually suitable for many products.

1. Online Education Platforms

Directly embed geometric figures in course pages, supporting drag-and-drop and dynamic demonstrations.

image.png

2. Question Bank Systems

Automatically generate or load geometric figures for math problems.

image.png

3. AI Tutors

Draw diagrams dynamically when explaining geometry problems.

image.png

4. Math Content Platforms

Directly embed geometric figures in articles.

image.png

5. Independent Developer Tools

Quickly build a math tool without developing your own geometry engine.

image.png

Why We Built This Open Platform

Over the past year, while working on the geometry system, I've had a deep realization: geometry capability is actually a fundamental capability for many products.

But there aren't many solutions available on the market currently—either complete software (like GeoGebra) or simple graphics libraries.

There's a lack of a way to call geometry capabilities like an API.

So what the Dino-GSP（大角几何）Open Platform hopes to do is enable more products to directly use geometry capabilities without having to reinvent the wheel.

👉 Dino-GSP（大角几何）Open Platform: open.dajiaoai.com

Top comments (0)