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. =)