What is Scrawl-canvas?

By | 28 January, 2015

Hi! My name’s Rik and, for the past 2 years, I’ve been developing a JavaScript library called Scrawl-canvas.

What is Scrawl-canvas? My short answer is that it’s a JavaScript library designed to make using the HTML5 <canvas> element a bit easier, and a bit more fun!

Which begs the question: why does the <canvas> element need a JavaScript library to be used?

The answer to this question is not nice. Put simply, you can’t do anything with the <canvas> element without having to use some JavaScript to make it do stuff. You want to load an image into the canvas? You’ve got to use JavaScript to do it. You want your users to scribble stuff all over your website? For that, you’ll need the a lot of JavaScript sitting behind the canvas to make it all work.

And let’s be honest here. That JavaScript code is going to be ugly. Because the JavaScript Canvas API is basic, ugly and – at times – darn right confusing.

And that’s why canvas libraries exist. Fabric.js, Pixi.js, Canvas.js, Kinetic.js – they all came about to make working with the canvas element a bit easier.

So why does the world need another canvas library? Why did I bother to write Scrawl-canvas when there’s already a lot of other libraries out there already?

See the Pen Path animation by Rik Roots (@kaliedarik) on CodePen.

I needed to write Scrawl-canvas because I have a vision for the <canvas> element that those other libraries don’t seem to share. I want the <canvas> element to be an integral, first-class member of the HTML family – not an add-on (like Flash), but rather something that can be added to any website … and add value to that website. I wanted a system where boxes and circles on the canvas can interact on an equal footing with all the other DOM elements on the webpage. Where canvas entitys and DOM elements shared a common language for positioning, sizing and styling; for animations and tweens.

A mad, bad, gloriously technicolor world where coding canvases became as much fun as coding the rest of the website.

Does Scrawl-canvas realise this vision? Almost! It won’t be long before that vision is realised. In the meantime, feel free to check out my demos over on CodePen, and visit GitHub to get (or fork) your own copy of the library – github.com/KaliedaRik/Scrawl-canvas.


Click click ...Tweet about this on TwitterShare on Google+Share on FacebookShare on TumblrShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *