https://github.com/mattor/tarpaulin
A minimal toolset aimed at mathematical drawing on canvas or svg
https://github.com/mattor/tarpaulin
browser canvas drawing graphics graphics-api graphics-library graphics-programming graphics-rendering javascript javascript-tools mathematics maths svg
Last synced: about 2 months ago
JSON representation
A minimal toolset aimed at mathematical drawing on canvas or svg
- Host: GitHub
- URL: https://github.com/mattor/tarpaulin
- Owner: mattor
- License: mit
- Created: 2019-02-22T08:15:23.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-10-11T11:34:30.000Z (8 months ago)
- Last Synced: 2025-04-12T04:08:44.229Z (about 2 months ago)
- Topics: browser, canvas, drawing, graphics, graphics-api, graphics-library, graphics-programming, graphics-rendering, javascript, javascript-tools, mathematics, maths, svg
- Language: TypeScript
- Homepage:
- Size: 764 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tarpaulin [](https://www.npmjs.com/package/tarpaulin) [](https://npmjs.org/package/tarpaulin)
> A minimal toolset aimed at mathematical drawing on canvas or svg
## Install
Install with [npm](https://www.npmjs.com/):
```sh
$ npm install --save tarpaulin
```
Install with [yarn](https://yarnpkg.com):
```sh
$ yarn add tarpaulin
```
## Usage
```js
import Tarpaulin, { Color } from "tarpaulin"
// Set appearance
const size = 600
const xMin = -50
const xMax = 50
const yMin = -50
const yMax = 50
// Create a canvas tarp
Tarpaulin.createCanvas({ size, xMin, xMax, yMin, yMax })
// Or create an SVG tarp
//Tarpaulin.createSvg({ size, xMin, xMax, yMin, yMax })
// START DRAWING
Tarpaulin.drawGrid()
Tarpaulin.drawAxes()
// Draw filled & stroked shapes
Tarpaulin.drawCircle([-25, 25], 15, { fill: Color.Red, stroke: Color.Black })
Tarpaulin.drawRect([10, 40], 30, 30, { fill: Color.Blue, stroke: Color.Black })
Tarpaulin.drawPath([[-25, -10], [-42.32, -40], [-7.68, -40]], { fill: Color.Yellow, stroke: Color.Black })
// Draw filled-only/stroked-only shapes
Tarpaulin.drawCircle([15, -15], 5, { fill: Color.Green })
Tarpaulin.drawRect([30, -10], 10, 10)
Tarpaulin.drawPath([[15, -30], [9.226, -40], [20.773, -40]], { stroke: Color.Black, closed: true })
Tarpaulin.drawPath([[30, -30], [40, -30], [35, -30], [35, -40]], { stroke: Color.Black, strokeWidth: 5 })
```
See more usage examples in [examples](examples/)