Joe Warren
Aug 15, 2016
1 min reading time

Drawing squares of colour with code

The Canvas API has been available in Chrome for a long time now, version 4 in fact. It dawned on me one evening late last year that I’d never actually played around with it. Enter my super duper creative imagination.

This beautiful piece of art emerged. Colours

I started with a colour palette that I found on Colourlovers and built that into an array.

View the full gist

Next I looped through the available space on the canvas and picked a random colour for each predefined tile size and drew it. There are a lot of magic numbers in here, they just came around from me changing them and seeing what difference they made until I settled on them. That’s some of the fun of drawing things with code, the tiniest of changes can produce the most dramatic results.

The code isn’t pretty, it’s certainly not the most efficient way of doing it either. I had fun though and felt strangely proud of my colourful squares. It felt like the first time i’d successfully printed out $_GET in PHP, exciting, I was discovering a whole new realm of development.

The point I’m trying to make is that you should play around with a technology you haven’t used before, you might end up with your own colourful squares.

Tags html5, canvas, javascript