One of the disadvantages of writing a blog post on little sleep late at night in a hotel room while watching a movie and talking with Dion and doing your email is that you inevitably forget to write something you meant to.

In this case, one of the big drivers for writing the previous Bespin and Canvas post was to discuss accessibility–which I then neglected entirely to mention. Let me rectify that here and add a few other miscellaneous bits.


Rendering all of our content to a giant bitmap is obviously not the best way to integrate with all kinds of technologies designed to make content more accessible in various ways. But getting past that initial observation, we’re actually really interested in finding ways to make Bespin very accessible.

One of our initial ideas is to embed semantic content inside of the <canvas> element itself, as in:

  The content inside the Bespin editor
  could be embedded inside here as text nodes

It might not be expensive (in UI latency terms) to keep these text nodes synchronized with the canvas editor since the UI thread doesn’t need to re-render anything as a result of the constant updates. If this approach were to incur a performance penalty, Bespin could have an “accessibility mode” that would optionally turn this on.

Bespin Dashboard
Bespin Dashboard

The Bespin dashboard also uses canvas, but for components instead of just text. We’re actually thinking of killing two birds with this one and having the hierarchy of the components defined inside of the <canvas> element:


We could then build the UI using this hierarchy rather than by using the entirely programmatic approach we have in place now:

// this is pseudo-code not pulled directly from Bespin, but
// Bespin's dashboard code looks similar
var splitPanel = new SplitPanel();
var list = new List();
var tree = new HorizontalTree();
splitPanel.add([ list, tree]);

You would style and layout these components using separate artifacts (CSS and a layout-specific artifact).

We’ll talk more in a future blog post about this concept of using canvas to render components; it’s really more about supplementing DOM-rendered components with canvas-rendered components and laying out the combination with JavaScript (rather than CSS / HTML)–this is what we briefly mentioned as “Thunderhead” in the announcement video.

An advantage to this approach for accessibility is that we can provide a clean, fully-semantic hierarchy of the content, rather than status quo of HTML which runs the spectrum from style-and-content-mashed-together-seamlessly on one end to almost-pure-semantic-content-with-a-few-compromises-to-deal-with-CSS-realities on the other.

Let me again emphasize that Thunderhead is an experiment at what this kind of thing would look like; we’re not sure if we like it and we may scrap it entirely at some future point.


We’re frequently asked why we didn’t use SVG for the editor. To be honest, the biggest reason is that I have a lot of experience creating custom components with Java2D, and Java2D strongly resembles the canvas API. It was pretty natural to start hacking away with canvas and JS.

But there are a few reasons we felt good about going down that road to begin with. First, based on experimenting with DOM rendering, we felt we had good reason to suspect that SVG wouldn’t perform as quickly as the canvas implementation since SVG has its own DOM API and thus is likely to mirror all of the performance issues to be had with HTML’s DOM.

On top of that fundamental concern, we had another: while it’s straight-forward to implement our own painting optimizations in canvas (and we have), with SVG it’s much more subtle and involves understanding the implementation details of SVG run-times and whatever optimizations have been implemented under their covers (again, the same as with HTML DOM performance optimization).

Also, as a fairly large specification, we were concerned about compatibility headaches as differing subsets of SVG are implemented in the browsers that support it. We didn’t have the energy to fight DOM compatibility issues during the day and SVG compatibility headaches at night.

Having said that, we’d love to see an SVG version of the Bespin editor emerge at some point and compare its performance and codebases. There’s certainly a good chunk of JS code that could go away if an SVG version worked out.

Stand-alone Editor?

We’ve also been asked whether we’d like to make it easy for folks to embed Bespin’s canvas editor in their own non-Bespin projects. Absolutely we do. Bespin will eventually spin out three projects:

  1. The Bespin project: an on-line code editor (i.e., the project we’ve currently announced)
  2. Thunderhead: a canvas/JS GUI toolkit
  3. (To Be Named Editor): a stand-alone canvas editor that you can embed

To make it seem less like I’m making this up just now, here’s what the Thunderhead logo looks like:


Canvas versus Firefox

Some folks have also wondered why we didn’t just enhance Firefox to do the things that we achieved by using canvas and JavaScript. The answer to that is simple: we’re not interested in making Bespin only run on Firefox. We want as broad an audience as possible to use it.

However, we’re already talking with standards folks and browser folks about how best to pull some of these ideas back into the browsers. This isn’t canvas versus the browser, it’s about using canvas to experiment with new features ahead of the browser, and applying those “learnings” (is that really a word? WTF) back to the browsers.

More to come soon, thanks for reading.

56 thoughts on “Bespin and Canvas: Part 2

  1. Are you familiar with the expression “eating your own dog food”?

    On one hand, we have folks, at Mozilla and elsewhere, telling people that open standards like HTML5, CSS, SVG, the DOM etc. are the way to go for building advanced interfaces on the client side, instead of using proprietary solutions like Flash or Silverlight.

    On the other hand, we have other folks, also at Mozilla, saying that none of that stuff was good enough for them, so they had to go straight to 2d drawing primitives and rebuild everything from scratch. At which point, there is no technical reason not to do it with Flash instead, and get the additional benefit of running on all browsers now, with no compatibility concerns.

    It’s also a bit unsettling to hear that Firefox couldn’t fulfill the text layout and rendering needs of a text editor, considering that 90% of its job is to layout and render text-based content with advanced styling (ie web pages).

    It seems to me that Mozilla is shooting itself in the foot with Bespin, from a PR point of view.

  2. @LaC: Actually, canvas is an HTML 5 standard, not a proprietary solution. It’s a peer to any other feature of HTML.

    One of the cool bits about not having Bespin in Flash is that we can run Bespin on the iPhone (if we implement bitmap font rendering, which we may).

    I don’t think it may be all that surprising that HTML isn’t optimized for code editors; that’s not really the browser’s primary purpose, is it?

    Finally, the great thing about Bespin being a Labs project is that we’re free to experiment and try crazy things. I’m not very surprised that some people think we’ve gone off the deep end with Bespin, but we do hope to get some conversations started and learn some lessons to apply to our efforts at making the web better.

  3. LaC: there are huge differences between canvas and Flash: canvas IS an open standard (see HTML5) and there are multiple interoperable implementations, even multiple excellent open-source implementations.

    But you’re also right that using canvas is a giant workaround for missing functionality and poor performance in the text editing built into browsers, and that’s something we should do something about, and I think we will.

    In the meantime, the open Web also needs killer tools, and if canvas is the expedient way to build them, then go for it.

  4. Some (hopefully constructive) criticism on your logos:

    Firstly, the Bespin logo looks to me like curly braces sitting on a beanbag. I’m not sure quite how you could make it look more like a cloud and less like a beanbag.

    Secondly, I’m not a big fan of using initials in a logo, as in Thunderhead. It reminds me of Adobe products – although at least you’ve put more effort in than just drawing a square with some letters in. 🙂 Instead of the letters could you have a page with code on it or something similar? Or perhaps some other code symbols, you can’t really use {} in both logos though.

    I know it’s early days and these things change with time, but thought I’d get my 2c worth in. Hope it helps.

  5. Hi folks, very nice!

    However, I’d also like to toss in a vote for sticking to contentEditable. There are already several proofs of concepts for syntax highlighting using contentEditable and they don’t appear to have the performance problems you seem to be concerned about.

    Heres the first result off Google I found, for example: You can paste in tens of thousands of lines and editing is just as speedy as with a few lines.

    Implementing columnar highlighting might be tricky, but its doable I think. The selection API certainly allows discontinuous selections, so if you got some font metrics you could implement that. Its also a candidate for the browser to implement.

    The infinite spaces at the end of each line could also be implemented with a simple hack I think. It might involve a bit of capturing mouse/keyboard events and redoing some functionality yourself, but its better than doing the whole stack yourself no?

    Could you maybe go into a bit more detail about why contentEditable is insufficient? As someone who hacks with it fairly regularly for more complicated apps than a text editor, I’d love to see some of its problems improved by the presence of a nice killer app utilizing it, so it pains me to see it being given up on. 🙂

  6. I think BeSpin is a great idea, but I have to admit that the choice of canvas+javascript worried me a little: it makes evangelising open semantic markup and against Flash-like opacity much more difficult. So I am glad to see you’re proposing to shift to more open markup.

    BeSpin highlights the fact that we need to address HTML+CSS’s *appalling* layout capabilities ASAP. If this project inspires those changes, that would be a fantastic result.

  7. Ben, thank you for this new post about accessibility. I think that including the text content in the canvas element is a good choice.

    Bespin will become a very good tools 🙂

  8. The standalone canvas editor project is very interesting, I can’t wait to see it!

    I guess you’ve chosen the MPL license on purpose, but why didn’t you choose a tri-license? Won’t that be a problem to include the standalone canvas editor in Mozilla-based projects?

  9. Are you thinking of “To Be Named Editor” as a code editor? Otherwise, another downside of canvas would be the lack of spell-checking. Of course, that could be implemented from scratch as well.

  10. I understand why canvas is used for the editor component, but why use it for the rest of the interface? I’ve not heard the reasoning beind that. It seems like the file chooser and open sessions could much more easily be implemented with HTML and JS

  11. “Actually, canvas is an HTML 5 standard, not a proprietary solution.”

    um, no. There is no “HTML 5 standard”, not even an “HTML 5 recommendation”, although there is increasing consensus that there is an “HTML 5 trainwreck”. Time will tell.

    CANVAS tag was a “proprietary Apple solution” (Apple being the most closed and non-transparent hardware company), embraced later as a “proprietary Google solution” (Google being the most closed and non-transparent audience-tracking company), both of them trying to railroad through to have it become a de jure standard, ‘way in advance of it being any de facto standard.

    That swear-word, “proprietary”… if you could cut it out of your vocabulary, eliminate reliance on a prejudicial label, then you might find that you can say more.

    (Where do I stand on Bespin? If you can create something useful, great. But it does undercut the rest of the rhetoric used to differentiate from useful realworld solutions that were “not invented here”.)

    (And btw, sorry if I come across as snappy here, Ben, these allergies are killing me. 😉


  12. @John Dowdell: Hey, Dion and I have a lot of friends at Adobe, we love you guys, let’s not start a flame war, okay?

  13. @Reggie Drake and Cyrus Omar: Hey, syntax highlighting was never a reason to avoid contentEditable. Performance was. To remind myself of just how bad performance can be, I followed Reggie’s link to one of the CodeMirror sites, created a file ~1000 lines large, and the browser proceeded to deadlock completely.

  14. I think that has more to do with it having to process 1000 lines of new code to syntax highlight. That could be lifted to a worker thread, no?

    Once the text is there, editing is fairly snappy regardless of how much text is around.

    Its not a huge deal, you’re definitely pushing boundaries either way with Bespin so kudos!

  15. Woah, way too much hating on . Remember, the internet was built on “rough consensus and running code”, the IETF approach, and pretty much most progress in the Web since 1993 has been vendors shipping extensions which are later harmonized and ratified as a “standard”. Javascript itself was a Netscape extension, later a “standard”.

    Canvas runs in WebKit, FF, and Opera now. It’s basically a defacto standard except for IE, so it is not going away anytime soon. Methinks canvas is encroaching on some territory that Adobe thinks is theirs and it’s touching some raw nerves.

  16. @Ben: Locking up on a big file would be considered a bug in CodeMirror. Could you tell me which highlighter, which browser, and which file you used, so that I can try to fix it?

  17. Canvas must be a browser standard.

    How do I know this? I know this because it’s implemented in Opera, Firefox, Safari, and Chrome, but not in IE. Isn’t that the very definition of a browser standard?

  18. Good work, folks. I have high hopes for Thunderhead.

    As for your use of markup within the <canvas> tag, allow me to suggest an alternative approach. If you embed a “little language” for layouts, you can have the advantages of both declarative markup and lack of intrusion into the document:

    var myComponent =
    “” +
    ” ” +
    ” ” +

    You can now take the approach of E’s quasiliterals:

    to substitute actual program values into the expressions. Let’s say each widget has a “model” attribute. You can then:

    var myListModel = /* something */;
    var myTreeModel = /* something */;
    var myComponent =
    “” +
    ” ” +
    ” ” +
    { myListModel, myTreeModel });

    where I’m using proposed ES-Harmony sugar in which this:

    { a, b }

    is shorthand for this:

    { a: a, b: b }

  19. Sorry! I forgot to escape my angle brackets! Here are my examples again:

    var myComponent =
    “<splitPanel>” +
    “<list/>” +
    “<horizontalTree/>” +

    You can now take the approach of E’s quasiliterals:

    var myListModel = /* something */;
    var myTreeModel = /* something */;
    var myComponent =
    “<splitPanel>” +
    “<list model=@myListModel/>” +
    “<horizontalTree model=myTreeModel/>” +
    { myListModel, myTreeModel });

  20. (Just to prevent misconceptions: The bug in CodeMirror that Ben was referring to has since been fixed. There’s nothing inherently slow in designMode-based editors.)

  21. Just curious, by why not write a tool that can translate declarative tags to script during or prior to the page rendering. This is what ASP.NET does with HTML tags. I believe Silverlight renders XAML declarative tags to .NET object, and even Google is working on a declarative markup for GWT(uIBinder or something).

    Given the success of this model, why not come up with something similar for the canvas

  22. When will thunderhead be split from bespin? I see great potential in an Open Source thunderhead like product.

    Apologies if this is already done, I’ve just been looking for a thunderhead project for a while and cannot find it.

    PS, well done on the awesome products.


  23. Hey Guido,

    I’ve been preoccupied with other things of late, but I would love to see Thunderhead split out. I’ll see if I can find time to dive in and get it split out from Bespin.


  24. Hi there very nice site!! Guy .. Beautiful .. Amazing ..

    I will bookmark your web site and take the feeds also?

    I am satisfied to seek out numerous useful info here in the publish, we need work out more techniques in this regard,
    thanks for sharing. . . . . .

  25. You have just built an attached garage with a foundation in the Sims 3, but a few finishing touches are needed.

    That is why many people look to add windows to their garage door.
    If your garage door is old and worn out, a new one can do a lot to
    improve the look of your home.

  26. You have just built an attached garage with a foundation in the Sims 3, but a few
    finishing touches are needed. Tilt up doors use fir,
    spruce and other soft wood; roll up uses oak, redwood or plywood.
    These tend to be the noisiest of doors so bear this in mind if
    you have a bedroom above and need to use the door when people may
    be sleeping.

  27. I love what you ǥuys tenԀ to be up too.

    This kind of clever work and coveraǥe! Keep up the superb works guys I’ve addeɗ you guys
    to my personal blogroll.

  28. Pretty nice post. I just stumbled upon your blog and
    wanted to say that I have really enjoyed browsing your blog posts.
    In any case I will be subscribing to your rss feed and I
    hope you write again soon!

  29. Hello would you mind stating which blog platform you’re using?
    I’m planning to start my own blog in the near future but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style
    seems different then most blogs and I’m looking for something
    completely unique. P.S Sorry for getting off-topic but I
    had to ask!

  30. Are you ready to try out one of the women free dating sites or
    are you interested in finding a different type of dating site.

    All the users need to do is login with the username and password in some cases and can
    complete the transactions for online transactions.

    There is a vintage free printable Christmas coupon
    book offered here, the coupons also have pre-printed “gifts” on them.

  31. I was extremely pleased to uncover this site. I wanted to thank
    you for your time for this particularly wonderful read!! I definitely enjoyed every
    bit of it and i also have you book-marked to look at new information in your blog.

  32. clash of lords hack tool includes a large function in U .
    s . Tradition. Many individuals is frequently noticed getting involved
    in routines related to clash of lords hack. That is in part
    mainly because individuals of most age groups is usually engaged along with households are brought collectively by simply this
    specific. Normally an individual exactly who
    exhibits the hate for clash of lords hack tool may be considered the outcast.

  33. monster legends hack 2014 carries a substantial position with U .
    s . Way of life. Many people is frequently seen involved in routines related to monster legends cheats.
    This really is to a certain extent due to the fact folks
    of all age range might be included and also people are usually delivered collectively simply by
    this specific. Usually someone exactly who features their own don’t like
    regarding monster legends hack tool could possibly be
    regarded a good outcast.

  34. Having read this I thought it was rather enlightening.
    I appreciate you taking the time and effort to put this short article together.
    I once again find myself spending way too much time
    both reading and commenting. But so what, it was still worth it!

  35. Get focused and devoted and locate a spot where
    you can play daily, whether with peers or other footballers.
    Fans and media members who think the football Bedlam Series is a
    premiere rivalry. I guess a handful of suspensions was enough to satisfy the NCAA.

  36. Excellent post. I was checking continuously this blog and I’m impressed!
    Extremely useful info particularly the last part 🙂 I care for such information much.

    I was looking for this particular information for a very long time.
    Thank you and best of luck.

    buy xanax افضل شركة مكافحة حشرات بالدمام افضل شركة
    تسليك مجارى بالرياض افضل شركة نظافة
    بالرياض buy xanax buy xanax افضل شركة تخرين عفش بالرياض buy xanax
    buy xanax buy xanax افضل شركة مكافحة الصراصير
    بالرياض buy xanax رش مبيدات قبل صبة
    النظافة شركة نظافة بيوت buy xanax
    افضل شركة تنظيف فلل بالرياض
    buy xanax buy xanax buy xanax buy xanax buy xanax
    افضل شركة مكافحة حشرات بالرياض buy xanax buy xanax
    buy xanax افضل شركة تنظيف فلل بالرياض
    افضل شركة جلى بلاط بالرياض
    buy xanax افضل شركة مكافحة حشرات بالرياض افضل شركة تنظيف بيارات بالرياض buy xanax
    buy xanax
    buy xanax buy xanax buy xanax buy xanax buy xanax buy xanax
    buy xanax رش مبيدات قبل صبة النظافة
    افضل شركة رش دفان بالرياض buy xanax buy
    xanax افضل شركة مكافحة حشرات بجدة buy xanax buy xanax افضل شركة تنظيف فلل بالرياض buy xanax
    buy xanax {افضل شركة جلى بلاط بالرياض buy xanax buy xanax buy
    xanax buy xanax buy xanax buy xanax
    شركات تنظيف بالرياض buy xanax buy xanax buy xanax buy
    xanax buy xanax buy xanax buy xanax

  37. Wow! After all I got a webpage from where I be able to
    actually obtain valuable information regarding my study and knowledge.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s