Personal JavaScript Canvas Library. (BasicCanvas)

Gallery
1

After seeing the amazing work done both in p5.js and Processing alike, I always wondered how they manage to work so intuitively and easily when compared to what their ‘raw’ graphics APIs look like.

I went ahead and implemented my own 2D Canvas manipulation library in JavaScript for the browser, with a couple of ideas already in mind.

This library can handle multiple canvases at once in the same namespace and encapsulates shapes and such to each canvas individually, where anything drawn is almost always considered a Shape, all stored in the canvas object and rendered when told.
It also uses a lot of the new ES6 features including the use of imports (not really meant to be used without imports).

It’s currently quite rudimentary and clearly still has many features to be added, but otherwise, it’s still functional and you can do some neat stuff in it pretty easily.

I’d love for you to check it out and I’d very much appreciate any feedback/thoughts/criticism on the library!

Some simple Examples of what you can do with the library: canvas.knutsen.co
(be sure to check out their respective source at the GitHub repo)

The Project is located here: github.com/Demonstrandum/BasicCanvas

4 Likes
2

Thank you for sharing this!

Question: You mention multicanvas as a key feature, but I didn’t find a multicanvas example in your examples list?

https://canvas.knutsen.co/example/

1 Like
3

I’ll be sure to make one soon, once I find an interesting idea for it.

1 Like
4

Here you are: https://canvas.knutsen.co/example/?clocks.js

Just a simple clock example, each in a different timezone.
It works the way you’d normally do one, except now you have two canvases to play with, all in the same file.

3 Likes