Declarative Canvas Drawing in JavaScript – DrawableJS

# NPM
$ npm install drawable-js

import { Drawable, Shape, Gradient } from 'drawable-js';

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

4. Create a Drawable instance with dimensions:

const rect = new Drawable(200, 100);
rect.ctx = ctx;

5. Define an update function containing drawing instructions.

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]  // Rounded corners
  }
  ];
};

6. Call build() to draw a rectangle with a linear gradient:

rect.build();

7. All item object properties:

• shape: Shape.RECTANGLE, Shape.OVAL, Shape.LINE.
• Coordinates & Dimensions: x, y, width, height, radius (for ovals). For lines: from: {x, y}, to: {x, y}.
• color: A string for solid fill color (e.g., "#FF0000").
• gradient: An object describing a gradient.
  • type: Gradient.LINEAR_GRADIENT or Gradient.RADIAL_GRADIENT.
  • Linear: angle, center (object {x: 'percentage', y: 'percentage'}), startColor, endColor, centerColor (optional).
  • Radial: center1 (object {x, y}), radius1, center2 (object {x, y}), radius2, startColor, endColor, centerColor (optional).
• stroke: An object { color: "hexOrRgba", width: number }.
• cornerRadius: An array of 4 numbers: [topLeft, topRight, bottomRight, bottomLeft].
• shadow: An object { dx: number, dy: number, color: "hexOrRgba", blur: number }.
• text: The string to display.
• font: A Font enum value (e.g., Font.ARIAL). These enums include hPerc and lowerOverlap values for better text metric calculations.
• size: Font size in pixels.
• textAlign: Canvas textAlign values (left, center, right).
• vAlign: Vertical alignment (top, middle, bottom). The library uses font.hPerc and font.lowerOverlap to try and position these more accurately.
• image: Can be an image URL string (like 'image/url') or image data.
• url: If image is 'image/url', this is the path to the image.
• colorFilter: A color string to tint an image.

8. API methods.

• ctx: Your canvas 2D context.
• items: An array. Each element is an object defining something to draw.
• update(): A function you define. It should populate the this.items array. Called by build().
• build(msInterval): Renders the items. If msInterval is provided and newState() is defined, it sets up a setInterval animation. Otherwise, if newState() is defined, it uses requestAnimationFrame. If newState() isn’t defined, it’s a static draw.
• clear(): Clears the area defined by the Drawable‘s x, y, width, height.
• onFirstBuild, onPostBuild: Optional callback hooks.
• newState(): Optional function for animations. Return true to continue animating, false to stop.

Changelog:

v1.0.4 (06/27/2025)

v1.0.3 (05/29/2025)

• New: Compatibility with modern browsers.

v1.0.3 (05/29/2025)

• New: Compatibility with modern browsers.
• Fix: Adjustment in typographic layout proportions calculations for text positioning.
• New LinearLayout function added.

v1.0.2 (05/24/2025)

• New: Support for color filters in images.
• New: Support for image rotation.
• Fix: Image loading issues.

05/22/2025

• Changes in Drawable.js to support rotation.