David N Brooks Designer, Developer, Musician, Artist, and Writer

Hello! I’m David, an interactive designer, musician, artist, and writer living in Georgia.

Making a Scaleable Canvas with Artisan JS

19 October 2010

In the first version of Artisan JS I wanted to get things out in front of everyone, but shortly after the release I incorporated the use of percentage values. Why is that important? Because if canvas is to survive, your illustrations should scale like vector data. If it doesn't, you have to rewrite your canvas work on a per-case basis.

With native canvas declarations you specify your locational data as a pixel coordinate. That's fine for most cases because you have a very specific use for it. But for me, I want to be able to show the same information at different sizes at different times.

Using Artisan JS, you can write simple declarations to the built-in layering system like this:

artisan.addToHistory(0, 0, 0, 'rectangle', [1, 1, '100%', '100%', '#ffffff']);
artisan.addToHistory(0, 0, 0, 'rectangle', ['10%', '50%', '30%', '30%', '#cccccc']);
artisan.addToHistory(0, 0, 0, 'circle', ['10%', '50%', '5%', '#000000']);
artisan.addToHistory(0, 0, 0, 'circle', ['50%', '50%', '5%', '#000000']);
artisan.addToHistory(0, 0, 0, 'circle', ['90%', '50%', '5%', '#000000']);

These five lines add two rectangles and three circles to the default stack at the default layer. You can create layers as you want, but that's not really the focus of this article.

So, once your shapes are added, you can render them to your canvases like this:

artisan.drawLayer('space1', 0, 0, 0);
artisan.drawLayer('space2', 0, 0, 0);
artisan.drawLayer('space3', 0, 0, 0);

space1, space2 and space3 are canvases of different heights and widths, but on render they should look roughly the same. Obviously, if your ratio of height to width changes the placement of your shapes will vary. By adding percentages we can create a variety of different sizes of the same image with the same amount of effort.

If you're using images you'll need to remember to bring in your original assets at the full size, otherwise it will look pixellated when you scale upwards.

It's also worth noting that unless the measurement is specific to the y-axis (canvas height), the percentage is always based on the x-axis (canvas width) for consistency.

I have some things in mind that really take advantage of the percentage functionality, but they're too early in development to talk about at the moment. Stay tuned for more on that. =)

About Me

I'm David Brooks, an interactive designer, generative artist, and electronic musician from Michigan. During the day I build things for Artletic, a great UX studio in Colorado. At night I create art and write music as Light The Deep and craft applications like Thousand Wires, JavaScript libraries like ArtisanJS, and build interesting things for the amazing clients of Northward Compass.

Read My Full Bio

You Also Might Like...

Technically Speaking

This site runs on the Textpattern content management system. CSS is precompiled by SASS, of course. Only a handfull of JavaScript libraries are in use, most notably Grunt. The visuals are done (by me) in Processing and Modo. The fonts are delivered with love by Typekit.


365 Days of Paleo/Progress

On July 1, 2014 I started into a year of Paleo and better health.
Here's my progress at a glance.

-18.2 lb. Weight

72 oz. Water Per Day

1787 Ave. Calories

See the progress

© Copyright 2005 - 2017 David Brooks. All rights reserved.