Authoring Content vs. HTML5 Canvas

One of the great promises of HTML5 is getting to play with real vector graphics again, mainly with the HTML5 canvas tag, but OpenGL too as well as it matures. The canvas tag drawing primitives seems pretty serviceable, though I've not looked at it any real depth. I have experience in a previous life writing the rendering engines for laser printers and graphics terminals so I'm not completely clueless (if a bit rusty).

What strikes me is that there's a real disconnect between the way that web production is done now versus where it eventually needs to go. Right now, Art is generated by graphic artists who give you .png and .jpgs. They hand over the images at the right resolution, and the geeks take it from there more or less. There are no knobs are anything like that with images so it's all very simple.

There really isn't an equivalent production pipeline for HTML Canvas that I've seen. Canvas is a javascript API so the natural thing that the Artist should produce for canvas vector artwork would seemingly be... javascript, right? Which moves the pen up/down/around, fills regions, etc, etc. Yet I haven't actually seen anything take that step. It may be my ignorance, but this is all pretty new and Google was being very equivocal about my search terms, so I'm guessing that I'm not alone groping around for a solution. How do artists and geeks interact in the Canvas world?

Let me give a for instance. In Phresheez, I wanted to create a cute graphic of a skier/boarder where you can click on various pieces of your gear and enter in the manufacturer, etc. That is, I want a customizable avatar. So far so good: I could do this with .png's like normal but I wanted a few features that make .png's problematic like, for example, I want my users to be able to color their parka one way, their skis another, etc, etc. I certainly don't want in the backend to have dozens of different color .png's to cover every combination -- yuck.

So I decided that canvas would a reasonable since it's vector graphics, I can just apply the fill/stroke colors on the fly as its rendering it. Great idea! Should work great!

Except for the disconnect I started out with. I'm a bad enough graphic artist to begin with, so I'm certainly not going to be creating art with naked context2d calls in javascript with lots of trial and error. I needed an authoring tool like, oh say, Google Draw, or Adobe Illustrator, or in my case Inkscape that I happen to have on my linux box. They, of course, have no clue about emitting javascript though. They do know about emitting SVG, but SVG as a native format (regardless of whether you think this is good or bad) is not well supported, especially on mobile browser technology (read: iphone/android) . And in any case, the authoring tools even if they do emit SVG don't really have a way to annotate the SVG in a way that I can manipulate in the geek realm (maybe I'm ignorant, but even then it's beside the point because I don't want SVG in the first place).

But there is some Google code (canvg) that takes SVG input and generates canvas pixels. Which is kind of like what I am looking for, but is still gross. What I did is drew my stuff up in Inkscape and labeled all of my fill colors with special colors and I just do a string replace with them to the appropriate colors. Simple, fast, and utterly grotesque and not scalable with real graphic designers, IMO. And this is a very simple example.

What it seems to me that I want is an authoring tool that both directly emits the javascript to create an object for drawing into a canvas, but also the exposes the knobs that can be played with at execution time. In my case, that would be the ability to affect the color(s) of the objects, but I might want many other knobs too, like, oh say, rotation knobs, scaling knobs, 3d effects knobs, animation features, etc, etc.

So what I really want is both the blob of code that renders the vectors into the canvas bitmap, but also an external set of public methods that I can play with in code to do what I need to do.

Oh, and my graphic designer needs to be able to produce those knobs too, and the answer better not involve my graphic designer understanding anything about programming, let alone javascript. My feeling is that this is an invented wheel in the visual effects business since you need to have discreet objects that real artists design, but obviously need to have attributes and methods for manipulation at higher levels. I know very little about this workflow though, but it seems to me that a vastly simplified Hollywood workflow (we're not creating Shrek MCM here, after all) would be a good place to look. Maybe not take their tools wholesale, but recasting their production pipeline's concepts into discreet functionality that the web can understand, and train both sides (eg Artists, Geeks) for the brave new HTML5 canvas world.

In conclusion, we need some cross pollination from the heavy-duty worlds of Hollywood (and probably the gaming world too) that allows lighter duty webbish vector art to start to grow. Until there's a well-understood set of interfaces between artists and geeks in the vector world, it's going to be slow to take off.