HTML5 Canvas vs Moveable Type

With a little fiddling it's easy enough to use <CANVAS> (and jquery) in tandem with Botzilla's somewhat elderly (and modified) installation of Moveable Type.

Minor tricks:

  • Remember to suppress Text Formatting -- no automatic <P> tags
  • Between different blog entries, don't reuse variable names, or element names, if you think you might ever need to have multiple canvases on the same page (say, in index or search pages). You will disappear into the fourth circle of scoping hell.
  • Likewise, if you think that multiple canvases per page is a real possibility, then put each canvas's prep and render code into a distinct function, so that you can move your onload() or $(document.ready() functions into the header template, not the body of the entry itself. In the header, declare an initially-empty array of functions, and have your ready() function iterate through them.
    Then in each scripted entry, add your entry-specific render function(s) to that array. This way, the ready() function can just know what's needing to be set up for the specific page, regardless of which entries are being displayed and the # of visible canvases (A perusal of the initial state of this entry will show that I don't always follow my own advice. But adding that feature to Botzilla is one of my next steps). Be sure to put that array and calling function into all of your index and entry templates!
  • Linked sites like Facebook won't show <Canvas> or other animating elements, so if you want a good thumbnail, try adding a hidden image like so: <IMG SRC="/photo/journal//may03e-15.jpg" STYLE="display: none;" />
  • MT's preview page doesn't have all this extra js etc built-in. I suppose you can add it, and I probably will over time -- but as a quick workaround, to get a preview, I save my entry, press "Publish," then immediately look at the front index page -- if there's anything wrong, immediately change the entry state back to "Draft" and save again. This will remove the entry from the front page and the RSS feed, but: the "permalink" actual page file (in this case, "/blog/archives/000738.html") will still be there on the server! Download it and debug locally, then transport your changes back into MT. A bit of a shuffle but it's a workflow that can get you from points A to B.
  • Beware trying to test-post to Facebook, changing the contents of the blog entry (even for typos) and trying to post it to FB again -- FB caches everything the first time, so... if you want a change that will appear there, you need to make a new copy of your entire post, publish that, and hide the old one (how do I know this?).
  • Google+ is smart enough to recognize the difference between javascript blocks and actual human-readable body text. Facebook is not, and may just insert blocks of random code onto any FB link you create pointing to your entry. Maybe they will learn.

Comments on "HTML5 Canvas vs Moveable Type"


All content on is 1994-2017 by Kevin Bjorke. All Rights Reserved.