Skip to main content
Logo

CanvasPainter.js

Using JavaScript to draw basic shapes on HTML5 Canvas with ease. 🦥

Getting startedDemo

Easy to Use

With CanvasPainter.js, you just create shapes and draw them on a canvas with a few lines of code. It's quick, straightforward, and hassle-free. Perfect for both beginners and pros.
const canvas = new Canvas('myCanvas');
const rectangle = new Rectangle(50, 50, 100, 50);
canvas.draw(rectangle);

Automatic Updates

CanvasPainter.js takes care of redrawing for you. When you make changes to shapes, the canvas detects them and updates automatically - no need for manual redraws.
const canvas = new Canvas('myCanvas');
const rectangle = new Rectangle(50, 50, 100, 50);
canvas.watch(rectangle);

Shape Manipulation

With CanvasPainter.js, resizing, rotating, and moving shapes is a breeze. You can easily adjust your shapes with intuitive controls, making it simple to create dynamic and interactive designs.
rectangle.move(10, 10);
rectangle.resize(47, 11);
rectangle.rotate(45);