canvas-lang Language Documentation

Installation

npm install -g canvas-lang

canvas-lang your-script.canvas

Introduction

Create Animated , Colorful ASCII-ART right in your terminals write few line .canvas code & get your desired ascii art !

Basic Syntax

Every canvas-lang program starts with a canvas block:

canvas {
  // Your code here
}

Commands

Background

Set the background color for the canvas:

background "color";

Colors can be named colors like "red", "blue", "green", or hex colors like "#FF5733".

Circle

Draw a circle:

circle at (x, y) radius r fill "color";

• x, y: Coordinates for the center of the circle
• r: Radius of the circle
• color: Fill color

Rectangle

Draw a rectangle:

rect at (x, y) width w height h fill "color";

• x, y: Coordinates for the top-left corner
• w: Width of the rectangle
• h: Height of the rectangle
• color: Fill color

Text

Display text:

text "Your text" at (x, y) size s color "color";

• "Your text": The text to display
• x, y: Coordinates for the text
• s: Text size (affects font selection - larger values use larger fonts)
• color: Text color

Line

Draw a line:

line from (x1, y1) to (x2, y2) color "color";

• x1, y1: Starting coordinates
• x2, y2: Ending coordinates
• color: Line color

Rainbow Text

Display animated rainbow text:

rainbow "Your text" at (x, y) duration 100;

• "Your text": The text to display with rainbow animation
• x, y: Coordinates for the text
• duration: How long to run the animation (in cycles)

Variables

Define variables for reuse:

var name = value;

Wait

Pause execution:

wait 1000;  // Waits for 1000ms

Frames and Animation

Create frame-based animations:

frame {
  // Commands for this frame
}

frame {
  // Commands for another frame
}

// Or use the animate block
animate {
  frame {
    // Frame 1
  }
  frame {
    // Frame 2
  }
} for 5000;  // Animation runs for 5000ms

Examples

Basic Example

canvas {
  background "navy";
  circle at (10, 10) radius 5 fill "yellow";
  text "Hello World" at (0, 15) size 10 color "white";
}

Animation Example

canvas {
  background "black";
  
  animate {
    frame {
      circle at (5, 5) radius 3 fill "red";
    }
    frame {
      circle at (10, 5) radius 3 fill "blue";
    }
    frame {
      circle at (15, 5) radius 3 fill "green";
    }
  } for 5000;
}

Rainbow Text Example

canvas {
  background "black";
  rainbow "Welcome to canvas-lang!" at (5, 5) duration 200;
}

Supported Colors

canvas-lang supports the following named colors:

• black
• red
• green
• blue
• yellow
• magenta
• cyan
• white
• gray
• orange
• purple
• pink
• brown
• lime
• navy
• teal

You can also use hex colors like "#FF5733".

---

Github of canvas-lang & other Socials so you contact us and ask for more features & Report Bugs!

Contribute at :

Github/rahulsingh2312/canvas-lang

Report Issues & Bugs & Request a feature at 🚧

Contact at X : https://x.com/rrahulol