DrawableJS

!GitHub language top

DrawableJS is a lightweight JavaScript library to draw shapes, gradients, styled text, and more on HTML5 . It is inspired by Android's Drawable resource, but designed for the modern web.

Features

- Draw basic shapes: rectangles, ovals, lines and images.
- Support for solid colors and gradients (linear and radial).
- Option to set borders, rounded corners, and shadows.
- Render text with font and alignment options.
- Extendable structure: each shape can include extra content.
- Compatible with both ES Modules and classic script tags (UMD).
- Inspired by Android’s Drawable and Canvas system.

Installation

Install via npm:
``bash
npm install drawable-js
`

Or include directly in the browser (UMD version):
`html

`

Usage

$3

Draw a Rectangle with Linear Gradient:
`js
import { Drawable, Shape, Gradient } from 'drawable-js';

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const rect = new Drawable(200, 100);
rect.ctx = ctx;
rect.update = () => {
rect.items = [
{
shape: Shape.RECTANGLE,
x: 20,
y: 20,
width: 200,
height: 100,
gradient: {
type: Gradient.LINEAR_GRADIENT,
angle: 45,
center: { x: '50%', y: '50%' },
startColor: "#FF5733",
endColor: "#FFC300"
},
stroke: {
color: "#333333",
width: 2
},
cornerRadius: [15, 15, 15, 15]
}
];
};
rect.build();
`

Result:

!Rectangle

Draw a Circle with Radial Gradient:
`js
import { Drawable, Shape, Gradient } from 'drawable-js';

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const circle = new Drawable(100, 100);
circle.ctx = ctx;
circle.update = () => {
circle.items = [
{
shape: Shape.OVAL,
x: 300,
y: 150,
radius: 50,
gradient: {
type: Gradient.RADIAL_GRADIENT,
center1: { x: 300, y: 150 },
radius1: 10,
center2: { x: 300, y: 150 },
radius2: 50,
startColor: "#00c6ff",
endColor: "#0072ff"
},
stroke: {
color: "#333333",
width: 2
}
}
];
};
circle.build();
`

Result:

!Circle

$3

Draw a Rectangle with Linear Gradient:
`html


`

Result:

!Rectangle

Draw a Circle with Radial Gradient:
`html


`

Result:

!Circle

Fonts

You can preload fonts into the Canvas using FontLoader.load:

`js
import { FontLoader, Font } from 'drawable-js';

FontLoader.load({
families: [Font.ARIAL],
active: () => {
console.log("Fonts ready!");
}
});
`

Demos

You can explore working examples in the /demo folder:
- demo/esm/drawable-demo.html: for modern projects using