9-slice scaling for javascript with canvas

Coming from a flash background, there are several features and consepts I’ve come to depend on over the years. One of them is the consept known as 9-slice scaling or grid-based scaling. Basically you define regions within an image that can be scaled, and others that should remain un-scaled. A grid, if you like defining top-left, top-center, top-right etc.

This technique is great for building graphically complex elements, while still being able to dynamically change width and height.

You can of course achieve much of the same effect using the CSS3 border-image property, but support, implementations and performance vary across browsers and platforms.

I was not able to find a proper implementation of this technique for javascript, so I ended up trying to write one myself. For now it’s really just a proof-of-concept, and not ready for production use. However I’m planning on re-writing it as a proper jQuery plugin (when I get the time).

If you’re still reading this and wan’t to find out more – check out this quick example I threw together.