Skip to content
A friendlier way to interact with the canvas; simple library for canvas manipulation.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A friendlier way interact with the canvas.


jsdelivr CDN (use this to import):

  • Canvas
  • Shapes
  • DOM


Auto-generated documentation:

TODO: Instructions on usage, for now look at the example files (and/or source files), still a small project.

Run Examples

Example hosted with ▲now:

To run unlisted examples, or run specific examples by a specifc URL, simply go to:

First clone:

git clone
cd BasicCanvas

then run with:


And go to http://localhost:8000/example/ (for an example file, see the index.html code to switch example).

Quick Examples


See Animation.

import * as BC from '../lib/BasicCanvas.js';
import {line} from '../lib/BasicShapes.js';


const sketch = canvas_id('sketch');
sketch.dimensions(400, 400);
sketch.translate(sketch.width / 2, sketch.height / 2);

sketch.fill = RGB(50, 30, 80);
sketch.stroke = HSL(340, 100, 45, 170);
sketch.stroke_weight = 4;
sketch.stroke_cap = 'round';

const branch = (previous, angle, depth, inc, first = true) => {
  if (depth < 0) return;

  let next = previous;
  if (!first) {
    next = Polar(Math.sqrt(depth) * 16, -angle, previous);
    sketch.render(line(next, previous));

  branch(next, angle + inc, depth - 1, inc, false);
  branch(next, angle - inc, depth - 1, inc, false);

const tree = P(0, 10);
sketch.loop(frame => {
  sketch.render(line(P(0, 200), tree));
  branch(tree, Math.PI / 2, 7, 0.6 + Math.sin(frame / 20) / 3);

Drawing a simple sinusoidal progressive wave:

import * as BC from '';
// If running this locally, you need a server running for `import`s to work, (for now).

use(BC)  // To avoid having to write `BC.` all the time.
         // (Be ware of collisions)

const sketch = canvas_id('sketch'); // Gets canvas with id="sketch".
sketch.dimensions(400, 400); // width x height, size of the canvas.

sketch.stroke = RGB(0); // Same as BC.RGBA(0, 0, 0, 255).
sketch.stroke_weight = 8; // 8px wide.
sketch.stroke_cap = 'round';

const BG = RGB(255, 255, 110);
sketch.loop(frame => {  // `frame` is an integer, starts at 0 and increments for every frame drawn.
  sketch.background(BG); // Redraw background each frame.

  sketch.render('sine', shape => { // Create new shape, `shape(name, construction of shape callback)`
    for (let x = 0; x < 3 * Math.PI; x += 0.2) { // Draw sine curve for this frame, next frame will be different
      shape.vertex(BC.Point(32 * x + 50, 32 * Math.sin(x + frame / 10) + 200));

Make sure the relative path to the BasicCanvas.js file is correct.

If the above file is called something like sine_wave.js then the index.html file (in the same folder) should look something like:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Simple Sinusoidal Wave</title>
    <canvas id="sketch"></canvas>
    <script src="sine_wave.js" type="module" charset="utf-8"></script>

Or, you could use the your_example.js file found in the example/ folder of the repo.

Try Yourself

Check out the CodePen: Explore the library by making small modifications to the CodePen and/or rewriting it to do something new.

You can’t perform that action at this time.