PaintWeb in Internet Explorer

26 June 2010, 20:08

Hello world!

Three days ago we received great news from Microsoft: the third platform preview release of Internet Explorer 9 includes support for the Canvas 2D Context API. Canvas comes into IE 9 together with numerous other platform improvements.

These days I have been working on my open source project, PaintWeb. I am quite excited to see it running quite well in MSIE 9.

Go ahead and try the PaintWeb demo page in Internet Explorer 9!

What works? Almost everything. Known issues:

• The globalCompositeOperation property is not yet supported by MSIE 9. The Color mixer visualization looks a bit weird because of this.
• If you change the canvasElem.style.width/height properties the Canvas element is cleared. This is wrong and breaks the implementation of image load and zoom. Check a minimal test case.
• The PaintWeb integration into TinyMCE demo page fails to work. It seems that TinyMCE 3.2.5 fails to work properly in MSIE 9. I shall upgrade it to the latest version, and thus update the PaintWeb plugin as well.

You may also check the PaintWeb change log, for more details.

Any feedback is welcome!

Published in: canvas, html5, microsoft, msie, paintweb, tinymce.

HTML5 demo: Video and Canvas

12 March 2010, 16:57

Hello everyone!

In the latest article I wrote about SVG and Canvas I included a small HTML5 demo which renders a color histogram using Canvas, analyzing any image element. Knowing that the Canvas API allows developers to also read video frames, I wanted to test how fast can JavaScript and Canvas render a color histogram while the video plays.

I changed the initial script so that now it works with HTML5 videos. Here is the result:

In this demo I include a small video and a big HD trailer - just out of curiosity I wanted to see something that barely runs within the browser. The demo works with Opera 10.5 and Firefox 3.6 - tested on Linux and Windows. Currently, Chromium 5 on Linux crashes when I try to load the page.

I did spend quite some time testing various improvements to the performance of the script. I would note that changing the script to not access the DOM elements and properties directly, does not bring any important improvements in execution speed. However, the change to use bitwise operations did make a difference. Further improvements would come if I would inline functions and remove some of the options. Still, any ideas on how to further improve the performance of the demo would be welcome.

Working on this HTML5 demo I also explored a new API available in Firefox 3.5: Web Workers. As I expected, the result of adding a web worker to this use-case is not something I am happy with. In a web worker I cannot access the video, nor can I access any of the canvas elements. I could move only a really small part of the code into a worker, and the performance penalty of sending the pixels in a message from the main thread to the worker thread is too significant. In the end, it runs quite slower than the script which does not use any web worker.

26th of June update: Opera 10.6 beta 1 was released a few days ago. This release brings support for Web Workers and it is really great to see that my Web Workers demo works in Opera as well.

Any feedback is appreciated.

Published in: canvas, demos, firefox, html5, opera, video.

Canvas text rendering

23 June 2009, 19:51

Hello again!

The HTML 5 Canvas specification defines two important methods for text rendering: fillText() and strokeText(). You also have a measureText() and the associated text-related properties: font, textAlign and textBaseline.

The Canvas Text API is only implemented in Webkit (Safari and Chrome) and in Gecko 1.9.1+ (Firefox 3.5+).

If you want to render text in your Canvas element in Gecko 1.9.0 (Firefox 3.0) you can use their proprietary Canvas text rendering API which is now, obviously, deprecated in favour of the standardized API. They provided the following methods: mozDrawText(), mozPathText(), mozTextAlongPath() and mozMeasureText(). To style the text you only have the mozTextStyle property.

In PaintWeb I use the mozPathText() method when the standard API is not available.

Opera does not support the Canvas Text API. I learned that the drawImage() 2D context method allows the drawing of SVG document as well - this works only in Opera. I implemented the text tool by adding a new minimal SVG document which contains a <text> element. This was updated and drawn in the Canvas element in sync with user interaction. However, after I completed the implementation I found several bugs:

• SVG redraw issues. When you update the text styling properties, or when you update the text itself, sometimes Opera fails to entirely redraw the SVG document, irrespective of the SVG being visible or not.
• memory leaks (test case). For some unfortunate reason, each drawImage(svgDocument) leaks some amount of memory. Got a crasher with this, and a system freeze after filling my physical memory (1 GB) and the swap (1 GB). ;)
• security violations (test case). Opera considers the SVG document as being an external resource, thus it marks the Canvas as being "dirty" once drawImage(svgDocument) is invoked. You can no longer read pixels using getImageData(), nor can you use the toDataURL() method. This broke the PaintWeb history mechanism, the selection tool, and the "image save" option.

The first two issues I said I can live with, but not with the security violations. Thus, I have disabled the text tool in Opera. I have reported the last two bugs to Opera with the associated minimal test cases.

If you are interested to render text, you can even attempt server-side "hacks". You could make a server-side script which renders text, and you can then draw it in your Canvas with an image element. This, however, defeats the purpose of PaintWeb - I want it to be a "pure" client-side Web application.

Lastly, you can implement "vector drawing" of text using a client-side font definition in some format, and then render it with basic paths in Canvas. Again, this is beyond the purpose of PaintWeb. Opera will implement Canvas Text some day. :)

For further details about attempts at rendering text when the standard Canvas Text API is not available, please read the rendering text blog post wrote by Christopher Clay at the end of 2006.

Published in: bugs, canvas, gecko, gsoc2009, html5, opera, paintweb, svg, text, webkit.

Announcing PaintWeb

6 November 2008, 20:39

Today I finally managed to upload and release my latest project: PaintWeb. Marius helped me with designing the GUI and with other suggestions.

PaintWeb is a client-side Web application which allows users to draw online. It makes use of some newer Web technologies, mainly the HTML 5 Canvas 2D context API. Currently, it's in its infancy, but with lots of work planned ahead.

The major decision for me was to release this project as open-source, under GPL v3. The project is now hosted on the Google Code servers.

Please contribute with feedback, bug reports and even code - volunteers are welcome!

Lots of bugs in the Web application are already known, nonetheless that shouldn't stop you from reporting them.

The Web application works in the latest versions of Opera, Firefox, Safari and Konqueror. Obviously, it also works with any Gecko and WebKit based Web browsers.

Nightly builds of Firefox 3.1 and SVN trunk builds of WebKit have the best support for this Web application.

I'd like to mention that the greatest surprise to me was that the new Konqueror 4 has its own Canvas implemention. They've done a really great job!

I am looking forward to publish more information about the project and to continue work on it.

Update 3 days later: Back in september we presented PaintWeb at a local university-organised seminar. Today we have updated the presentation and we translated it to English as well. Go ahead and download the English or Romanian presentation.

Published in: canvas, gpl, html5, open-source, paintweb, projects, talks.

Linux, Konqueror 4 and more

5 November 2008, 19:44

Sunday I upgraded my Ubuntu installation to the new version: Ubuntu 8.10. Almost three years ago I switched to using Linux exclusively. I haven't reinstalled Ubuntu since then. I always upgrade my system every 6 months, and then I spend a few days fixing post-upgrade issues. It's a pleasure. ;)

I am working on a new painting Web application. The greatest surprise to me was that the new Konqueror 4 implements <canvas>, and it does this theoretically better than Opera. I will make my Web application public and you will see this. Amazing and very quick work done by the Konqueror developers. Congratulations, guys!

Note: I initially thought that the Konqueror implementation of Canvas is just a copy of the code from Webkit, but it's not. They wrote their own code, which is great.

On a related note, I have published a new page with some of my Linux configuration files.

Published in: canvas, configuration, html5, kde, konqueror, linux, ubuntu.