On 23rd of April 2015, Mihai Șucan passed away due to metastatic
cancer caused by RDEB.
My name is Mihai and I work on the Firefox developer tools.
When it comes to web development, I like both server-side and
client-side work. I am mainly interested in web browsers, web
standards and related technologies.
26 June 2010, 20:08
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:
globalCompositeOperation property is not yet
supported by MSIE 9. The Color mixer visualization looks a bit
weird because of this.
- If you change the
properties the Canvas element is cleared. This is wrong and breaks
the implementation of image load and zoom. Check a minimal test case.
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.
16 October 2009, 11:17
PaintWeb is an
open-source web-based paint application usable as a component
within any other web application. From a technical perspective, the
5 Canvas and CSS.
Project contributors wanted!
If you are a student with spare time maybe you
want to work on a serious project, where you can learn new things,
where you can prove your skills. Maybe you thought many times about
"cool" projects you could do, but you do not have the resources to
just do it, then you might be interested of PaintWeb: you have the
chance to break out of routine, to quit working on boring projects
which level your skills down - you can work on a project where you
advance your skills. You will learn what it takes to start your own
If you are a teacher or a professor and you have
students passionate about computer science who do not have any
practical project, then recommend joining PaintWeb to your
students. As a teacher, you can help your students apply their
skills while working in an international team, over the Internet
without any physical boundaries. Besides these benefits, your
students are given the chance to work with some of the newest web
technologies, and they will also use source code version control
tools like Subversion.
The skills your students will develop are essential in IT jobs all
over the world.
Why PaintWeb? Because PaintWeb will be integrated
into Moodle 2 - the most
popular open source virtual learning environment. Hundreds of
thousands of students and teachers use Moodle all over the world.
There is also a PaintWeb plugin for integration into TinyMCE - one of the most
popular open source HTML editor, used by thousands of web sites and
applications. Thus, your work counts and makes a difference to many
people. If you want to be part of those who make image editing and
manipulation possible inside Moodle, inside TinyMCE and many other
open source projects, then join this project!
Who can contribute to PaintWeb? You, anyone! Are
implement new features, or you can fix existing bugs. You are not a
programmer? Then you can work on the project documentation,
tutorials or translations. You think you are not experienced
enough? Nothing to worry about, nobody was born expert - you just
have to want to learn and you will be guided through the process of
learning new things. Does it seem boring to work on a certain
aspect of the project? No problem, you pick what and when you work!
What can you do for PaintWeb? You can write
documentation or translations into other languages, and you can
implement new functionality into PaintWeb as a web developer. You
will learn to work in a cross-platform and cross-browser
environment, you will become very well acquainted to technologies
such as the DOM, HTML 5, Canvas and CSS among others. If you want,
you can take a look at the TODO list from
the project wiki, and also check the Issues tracker
to see what you could do for the project and what features are
If you want to join this project then get started
by sending an email to the mailing list at
email@example.com, or just contact
the project author.
Acest articol este scris în limba engleză. O traducere în limba
română este disponibilă.
16 October 2009, 11:16
This post uses the Romanian language. A translation in the
English language is also available.
PaintWeb este o
aplicaţie web de desenat ce poate fi folosită ca o componentă în
orice altă aplicaţie web. Proiectul este open-source, sub licenţa
GPLv3. Din punct
de vedere tehnic aplicaţia foloseşte tehnologii foarte cunoscute
Se caută contribuitori!
Dacă eşti student sau elev şi ai timp liber poate
doreşti să lucrezi la un proiect mai serios, mai mare, unde să
înveţi multe lucruri noi, unde să demonstrezi ce ştii deja. Poate
te-ai gândit de multe ori la proiecte "tari" dar nu ai cu cine să
le faci, nu poţi să le faci de unul singur, atunci cel mai probabil
te-ar interesa PaintWeb: ai şansa de a ieşi din rutină, de a
renunţa la proiecte mici ce te plafonează - îţi poţi dezvolta
aptitudinile tale pe plan profesional. De asemenea, vei căpăta
experienţă în ceea ce priveşte pornirea propriului tău proiect pe
Dacă eşti profesor şi ai elevi/studenţi pasionaţi
de informatică dar care nu lucrează la vreun proiect, atunci
recomandă-le PaintWeb. Ca profesor îţi poţi ajuta studenţii să
înveţe să lucreze în echipă, prin Internet, fără limite fizice. Pe
lângă lucrul în echipă, vor învăţa să lucreze şi cu cele mai noi
tehnologii web, de asemenea studenţii vor lucra folosind unelte
specializate precum Subversion pentru gestionarea
versiunilor de cod. Aptitudinile deprinse de studenţi sunt
esenţiale în slujbele din domeniul IT din întreaga lume.
De ce PaintWeb? Pentru că PaintWeb va fi integrat
în Moodle 2 - cea mai populară
aplicaţie web open-source de învăţământ la distanţă. Sute de mii de
studenţi şi profesori folosesc deja Moodle pretutindeni. Există şi
un plugin PaintWeb de integrare în TinyMCE - unul dintre cele mai
populare editoare HTML, folosit în mii de siteuri şi aplicaţii web.
Astfel munca ta contează şi va fi văzută de mulţi oameni. Dacă
doreşti să faci parte dintre cei ce fac posibilă editarea de
imagini în Moodle, în TinyMCE şi în multe alte proiecte
open-source, atunci participă la proiect!
Cine poate să contribuie la PaintWeb? Tu, oricine!
implementa funcţionalităţi noi, sau poţi repara erori existente. Nu
eşti programator? Atunci poţi lucra pe documentaţie, tutoriale sau
traduceri. Crezi că nu eşti destul de experimentat? Nici o
problemă, nimeni nu s-a născut expert - doar trebuie să doreşti să
înveţi şi vei fi ajutat cu îndrumări. Ţi se pare plictisitor să
lucrezi la o anumită parte din proiect? Nici o problemă, tu alegi
ce şi când lucrezi!
Ce poţi face pentru PaintWeb? Poţi să scrie
documentaţie sau traduceri, şi poţi implementa funcţionalităţi noi
aplicaţiile să ruleze pe mai multe browsere, vei învăţa diferenţele
între ele, vei cunoaşte foarte bine DOM-ul, HTML 5, Canvas şi CSS
printre altele. De asemenea, te poţi uita la lista TODO de pe wiki şi la pagina cu Issues pentru a vedea ce se poate face la proiect şi ce
este plănuit pe viitor.
Dacă doreşti să contribui trimite un email pe
mailing list la firstname.lastname@example.org sau contactează autorul proiectului. După ce
intraţi în contact puteţi discuta despre cum poţi începe să
contribui la proiect.
11 October 2009, 11:26
I want to update all of you on the latest happenings around the
Now that the summer has ended, I am starting to become busier with
studies, but ... I still got the chance to work on some
PaintWeb-related stuff. I moved out most of the things I had noted
down in the TODO wiki page.
These items are now showing in the issues tracker of
the project, each being properly categorized, tagged and with
I have also made some clean-up for the project front page, updated
existing documentation and I have included some new documentation
about web browser
bugs affecting PaintWeb, and about
Martin Langhoff has reviewed the code and published a proposal for
merging PaintWeb into the Moodle CVS HEAD (for the Moodle 2
release). In response to further feedback I have made it easier to
configure the PaintWeb packaging process, and I published more
documentation about this.
Last, but not least, I am beginning to make PaintWeb snapshot
builds available for download.
That's about all. Have fun!
7 September 2009, 16:04
Two days ago I have uploaded a snapshot of the PaintWeb code and the
integration scripts for Moodle
2.0 and Moodle 1.9, as required for the Google Summer of Code
program. This snapshot contains only the code I contributed up
until 14th of August 2009, and you can download it from the
Google Summer of Code 2009 Moodle project site. Obviously, this
code is provided only for recording the milestone I reached for the
GSOC project deadline. Any paint tool user is supposed to get the
latest code from my Git repository
or from the PaintWeb
Thanks to Anthony Borrow and Jordan Tomkinson, today a Moodle 2.0 with PaintWeb test
site has been published. So, now you can try PaintWeb directly
in Moodle. Make sure you login with the teacher account: user.
Password is: demo.
To try the paint tool, I have created a test course, and I added a
glossary activity. Inside the glossary activity there's a concept I
added. Go ahead and play with the glossary: add, edit or delete
concepts. In the TinyMCE
editor you can create new images and edit them seamlessly.
It should be noted that Moodle 2.0 and the paint tool integration
are both under development. This means that Moodle devs have not
yet completed upgrading all the code which deals with the HTML
editors - so, other pages where TinyMCE is used might not have
PaintWeb enabled because the configuration is still in "legacy
mode" (no file attachments are allowed).
Anyone is welcome to provide me with feedback on the user
experience, and any other thoughts.
31 August 2009, 16:28
Beside bug fixing and polishing PaintWeb in the past weeks, I have
also prepared a presentation about all the work I did this summer,
as part of my Google Summer of Code project. As such, I talked
about my GSOC project at the Linux
and Virtual Learning Environments 2009 seminary on Friday, the
28th of August.
You can download the presentation slides in Romanian and in
You may also watch the slides online at Scribd.com, both in
Romanian and in
English. Any feedback is welcome!
21 August 2009, 09:34
Since my previous blog post I did some polishing to the Moodle 2.0 integration. Dan Poltawski
from the Moodle community has provided his valuable feedback. He
suggested I switch the parsing of the data URL to a regular
expression and that I warn users before submitting a form while
editing an image with unsaved changes. I made both of these changes
and now I am looking forward for more feedback.
This blog post is more about the overall Google Summer of Code
conclusions. So, here we go. I started from a simple PaintWeb demo application,
without any proper jsdoc-formatted comments. Over the summer I did
- Split the whole code into multiple files: per drawing tool, per
extension, per language.
- Created a new configuration file which allows changing almost
any option inside PaintWeb, including keyboard shortcuts, tools,
extensions and more.
- Reorganized the entire code, followed more strict coding
guidelines, more naming consistency, etc.
- Wrote jsdoc-formatted comments for every function and method.
Based on the code now I can generate a complete and up-to-date
API reference documentation.
- Changed the way PaintWeb loads: the whole GUI is loaded using an
XMLHttpRequest from the server and added into the
page. The PaintWeb demo was a stand-alone Web application, but now
PaintWeb is a component which can only be used within another Web
application - in a similar fashion to how TinyMCE can be used.
- Developed a new API for PaintWeb
extensions, tools and "commands". This allows new developers to
extend and modify PaintWeb at any time.
- Implemented a new PaintWeb extension: MouseKeys. This allows
users to draw with the keyboard - no mouse is needed.
- Reimplemented keyboard shortcuts support such that it works
much better across different Web browsers. You can learn about this
work from the latest tutorials I wrote for Dev.Opera about
keyboard accessibility in Web applications.
- Made important performance improvements for the
- Split the GUI into multiple files: an XHTML file, a CSS and a
base code of PaintWeb.
a new GUI for PaintWeb, with better keyboard accessibility, and
with a new logo.
- Implemented a new "application events" API which allows
developers to hook into PaintWeb by means of events. For example,
developers can listen for events like "imageSave" or
"imageSizeChange". Such application events are used heavily in the
new interface implementation.
- Implemented numerous selection tool improvements and fixes.
- Implemented a new "Hand" tool for dragging the image inside the
- Made some important fixes for the Eraser tool.
- Made PaintWeb behave better with huge images - around 6000 x
- Made improvements to the Text tool and implemented better
cross-browser compatibility. Also, attempted Opera compatibility
with no luck.
- Made PaintWeb ready for "production use" by properly packaging
the whole Web application. The PaintWeb
packaging process is driven by a Makefile.
- Wrote "some" PaintWeb
- Wrote a hefty TinyMCE 3
plugin for easy PaintWeb integration into TinyMCE 3.
- Updated some patches for TinyMCE 3
integration into Moodle 1.9.
Implemented Moodle 1.9
and Moodle 2.0 integration - with different levels of success.
That is, Moodle 2.0 integration is succesful and working properly,
while the Moodle 1.9 integration still requires additional work due
to the lack of a file API.
That's about all I did over this summer. I am very pleased with the
results. In some cases, the results are beyond my initial
expectations. For example, I did not expect to have so much
PaintWeb documentation done over the summer. Writing the code for
all of the above was fun and a pleasure for me.
The Moodle community has been really great and friendly. I
appreciate all the feedback I got from the whole community.
What's next? Well, I hope this GSOC marks the beginning of a
fruitful collaboration with Moodle and with the overall open-source
community. I would like to continue work on Moodle 1.9 and 2.0
integration, and further improve PaintWeb. I certainly do not want
to abandon the project. :)
I must thank Helen Foster and
Langhoff for their constant support over the summer, with
feedback and testing. For example, Martin has provided important
help with the performance work for the OLPC XO, together with Robert O'Callahan from
Mozilla. And Helen was always
ready to answer any GSOC-related questions. ;)
Last, but not least, thanks to Olli
Savolainen and Jose
Cedeno - two of the Moodle GSOC students who were very helpful,
by testing PaintWeb and by providing valuable feedback.
14 August 2009, 10:36
Together with my mentor, Martin Langhoff, we have decided that it's
better for me to focus on the Moodle 2.0 integration of PaintWeb. This is because
Moodle 1.9 lacks a file API sufficiently advanced to meet the needs
of PaintWeb usage. Martin opened a relevant thread in the Moodle
forums about storing images
as attachements to text fields - it's worth reading to
understand why PaintWeb integration is far from trivial. Moodle 2.0
has the solution to our problem: the new File
Focusing on Moodle 2.0 integration does not mean we do not want to
complete the work started for Moodle 1.9. However, we want to have
PaintWeb ready for core integration, for the Moodle 2 final
release. The plan is for me to resume work on Moodle 1.9, some time
The Moodle developers are hard at work for the new Moodle 2.0.
They've done numerous improvements. If you like Moodle 1.9, you
will love Moodle 2.0. Integrating PaintWeb into the new version was
much nicer and quicker.
I completed the integration of PaintWeb into TinyMCE, and I also
made the image save action to work quite well. Images are saved in
the draft file area, as is the rule for any textarea-attached file.
If you want to get the Moodle 2.0 code with PaintWeb, get it from
git clone git://repo.or.cz/moodle/mihaisucan.git ~/src/moodle
git checkout -b mdl20-paintweb origin/mdl20-paintweb
You might be interested to read the
technical details about the Moodle 2.0 integration work,
published at Moodle Docs.
Since my last blog post, I also made important updates for the
Olli Savolainen has provided me
with more suggestions which I implemented. Thus, I changed the
color to yellow, for the "plugin bar" of the TinyMCE plugin. I also
made the "Save" and "Cancel" buttons look better. Last, but not
least, based on his suggestion I found a fix for the "Edit" overlay
button, for Firefox. For some reason, the button was not easily
clickable in Gecko-based browsers. The problem is now gone. Thank
you very much, Olli!
For better usability, I made the whole PaintWeb GUI resizable. Now,
users are no longer stuck with the fixed dimensions. The TinyMCE
plugin has been updated to synchronise the size of the editor area
with the size of the PaintWeb image viewport, for a better user
You can go ahead and try the updated PaintWeb+TinyMCE
With the latest work, I am meeting the Google Summer of Code
project goals: the development and integration of a paint tool
inside Moodle via TinyMCE. There's only some polishing work left to
do, and code reviewing from more Moodle developers.
4 August 2009, 11:15
I would like to update you all on the latest happenings in the
Moodle and PaintWeb land.
I have fixed some bugs in my TinyMCE plugin which prevented it from
working properly in Firefox 3.0. I also made a number of
improvements to the plugin and PaintWeb itself: images can now be
saved as JPEG, not only as PNG. In Opera 10 and Firefox 3.5
developers can now save Canvas images as JPEG - which is great.
Thus, when you edit a JPEG image, PaintWeb uses the JPEG format to
update the file. Another improvement for the plugin is now you can
click the PaintWeb icon in the TinyMCE toolbar even when an image
is not selected. When you do this, a dialog comes up which allows
you to create a new empty image - you can setup image dimensions,
background color and other options.
PaintWeb now offers better visual feedback when the image you are
editing is transparent. Background color support is now improved,
albeit it's missing a GUI option to change it at will - this is
going to be implemented some time after the end of GSOC. Also, as
explained above, PaintWeb can now save images as JPEG, thus I
should provide a GUI feature for users to pick the file format they
Moodle 1.9 integration has progressed up to the level that now
PaintWeb is entirely usable and I am quite happy with the result.
Image save is currently implemented in two ways: images are saved
as data URLs or as files inside the Moodle data directory. Both
saving method have advantages and disadvantages. Me and Martin, we
are currently discussing ways of improving image saving as files.
You can read all the gory
details about the Moodle 1.9 integration of PaintWeb in a
Moodle Docs wiki page I wrote.
In related news, I have created a Twitter account for "ROBO
Design" (for me and my twin brother). You can follow our
updates on Twitter as they happen. Additionally, I published the
Planet ROBO Design site,
where you can follow all the updates on what we do
(and I mean all updates). This small "planet" aggregates all the
feeds related to us - it's a single place where you can follow
anything we do.
Don't forget you can always try the PaintWeb demos
online. Any feedback is always welcome!
24 July 2009, 12:21
I am getting closer to having a Moodle demo ready with PaintWeb integrated.
Wednesday I had a very fruitful discussion with my mentor, Martin,
on how I should proceed with the implementation of file saving
inside the Moodle data directory. We have come to a conclusion
which I am about to implement. More details soon.
For now, I have registered a Moodle Git repository mirror
over at repo.or.cz. I have also
registered a Moodle "fork" where I publish my Moodle branches.
You can do:
git clone git://repo.or.cz/moodle/mihaisucan.git ~/src/moodle-mihai
git checkout -b mdl19-paintweb origin/mdl19-paintweb
With that, you can easily and quickly get an always up-to-date
Moodle 1.9 stable branch with TinyMCE 3 and PaintWeb
integrated. You can already play with PaintWeb in Moodle.
If you only want the TinyMCE 3 editor you can do:
git checkout -b mdl19-tinymce3 origin/mdl19-tinymce3
The TinyMCE 3 branch holds Moodle 1.9 stable with the latest
TinyMCE 3 integrated. The work I did on this branch is best
explained in a Moodle
When you want to update your branch simply invoke
pull. Please also check the official documentation about
how to use Git.
In related news, Opera Software has published the final part of the
article serie I wrote about
keyboard accessibility in Web applications. This article
details the cross-browser compatibility layer implementation for
keyboard events used by PaintWeb.
17 July 2009, 11:05
The Google Summer of Code midterm evaluations passed without any
problems for me, yay!
I have began work on integrating PaintWeb into Moodle. I will integrate my project
into the stable Moodle 1.9 branch and into the upcoming Moodle 2.0
Moodle 1.9 has a very old TinyMCE release (version 2.0)
which is not used by default - the even older HTMLArea is still
used. Both do not work in Opera and Google Chrome. For this reason
Martin Langhoff, my mentor, and other Moodle community members have
worked on patches to switch to the modern TinyMCE 3 editor. A
port of TinyMCE 3 to Moodle 1.9 is available on the Moodle
The clean port is quite well done, but again, it was "outdated",
being from october 2008.
For PaintWeb I took the work Martin did and updated it to the
latest Moodle 1.9 stable branch, the latest TinyMCE 3 version, and
made additional fixes. One fix was to make the editor show up in
Opera, Safari and Chrome, and another fix was for the script which
converts TinyMCE language files to Moodle language files.
PaintWeb integration into Moodle 1.9 will come as a patch on top of
the TinyMCE 3 patch. Currently I got PaintWeb loading fine in
TinyMCE, inside Moodle. More work is needed to get file save
working. For PaintWeb I did some assorted fixes for the Makefile,
for the overall keyboard accessibility, for multi-language support,
and I did improvements to the TinyMCE plugin.
You can download the updated TinyMCE 3
patch for Moodle 1.9. The package includes usage instructions.
In other related news, Opera Software has published the second part
of the article I wrote about
keyboard accessiblity in Web applications. This article
describes the inner workings of the MouseKeys extension for
PaintWeb. Make sure you checkout the updated and improved
source code of the MouseKeys extension in the PaintWeb code
Have fun until the next time!
8 July 2009, 14:03
In the past week there was important progress on PaintWeb. I have published
several wiki pages about PaintWeb on Google Code - this documentation comes
as an overview or a guide to the entire codebase and the API
reference. You can read about how to
integrate PaintWeb into your Web application, how to
extend PaintWeb, how to
package PaintWeb yourself with the Makefile, and how to use
the new TinyMCE plugin.
I have completed a new
TinyMCE plugin which allows you to easily and quickly integrate
PaintWeb. This plugin allows users to click an "Edit" button which
is overlayed on top of the editable images. The plugin also
includes a context menu item (right-click and choose "Edit image"),
and a toolbar button.
I have published a new demo page which shows the latest TinyMCE
and PaintWeb working together. Enjoy!
Moodle integration is currently being planned. I wrote my thoughts
and questions in a Moodle Docs wiki page about the
paint tool integration.
Last, but not least, for the purpose of tracking progress, I have
attached a packaged PaintWeb snapshot to the Moodle tracker
issue associated with my project.
Olli Savolainen has created some
very good mockups as proposals to improve
the PaintWeb user interface. His feedback is very much
appreciated, and I really hope to get to implement his suggestions
as soon as possible. Thanks Olli!
On a related note, for those interested on
how PaintWeb implements keyboard shortcuts, Opera Software has
just published the first part of a series of articles I wrote on
this topic. More articles will be published soon at the Opera Developer community site.
Have fun testing PaintWeb and reading articles about it. Don't
forget that I am always looking forward for feedback!
2 July 2009, 19:52
Since my last blog post I have completed the user interface
polishing for PaintWeb: the Color Mixer
and the Color Picker are both working fine now.
Today I have completed work on packaging. I also generated the
API reference documentation from the source code.
You can go and play with the PaintWeb
demo at the usual location.
For packaging I use a Makefile, YUICompressor,
jsdoc-toolkit, PHP and some
single file. I also merge the XHTML interface layout inside the
json_encode(). Once I have the hefty
script, I use the YUICompressor tool to make it a lot smaller.
For the PaintWeb interface stylesheet I use the YUICompressor in
combination with a simple PHP script I wrote. The PHP script
inlines the PNG images using data URIs. This
helps a lot in reducing the number of elements being downloaded.
Here are the numbers, for those curious of the packaging results.
- Three JSON
files, 33.9 KB;
- One XHTML file, 14.9 KB;
- One CSS file, 21.8
- 47 images (PNGs), 206.5 KB;
- A total of 70 files, 703.7 KB.
That's quite much. Here's what the current level of packaging gives
- Three JSON files, 33.9 KB. The JSON files are left untouched,
the configuration example stays the same - with all the comments in
it. It's up to the integrator to choose what he/she does with the
file (at the moment).
- One CSS file, 297.1 KB - with all the images inlined;
- A total of only 6 files, worth of 461.7 KB.
That's better, but there's room for more. You should always enable
gzip compression on your Apache
server. Here's what a properly configured server can give you:
- Three JSON files, 8 KB;
- One CSS file, 99 KB;
- A total of six files, and only 142 KB.
That's much better now. To properly configure your server, make
sure you enable gzip
compression in your .htaccess file:
If you are curious how fast PaintWeb loads, I added a timer in the
Web browser. On my local system it takes less than a second,
depending on the browser I use. Go ahead and try
PaintWeb yourself. Also make sure you check out the API
In the coming days I will be publishing guides on PaintWeb
development, extensibility and general code overview. This means
Moodle integration is ready to
23 June 2009, 19:51
HTML 5 Canvas
specification defines two important methods for text rendering:
strokeText(). You also
measureText() and the associated text-related
properties: font, textAlign and
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
To style the text you only have the mozTextStyle
In PaintWeb I use
mozPathText() method when the standard API is not
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
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.
22 June 2009, 08:29
Since my previous blog post I have been doing lots of changes under
the hood. Lots of them broke PaintWeb badly and made it unusable
for about two weeks - sorry for the lack of updates.
Now PaintWeb is
back in a better shape and close to being complete. Here's the list
- new user interface.
- some new icons and a new PaintWeb logo.
- keyboard shortcuts work for all tools and commands properly -
no issues like in previous PaintWeb trunk builds.
- changed the PaintWeb initialization a lot. Now PaintWeb is only
by Web developers easily in their applications.
- lots of new API for registering new
tools, extensions and commands into PaintWeb.
- I changed the entrance to PaintWeb. Now users have to load a
page which has minimal code for integrating PaintWeb.
- made the Text tool to work in Opera 9+ and Firefox 3.0 as well.
Unfortunately, there are some Opera-related bugs in the Text tool -
changes might come.
- rendering shadows works again in browsers which have support
for it (Chrome, Firefox 3.5, Safari, Konqueror).
- changed the selection marquee - now it's a nice dashed border.
- added the option to crop the image to the size of the current
- several bug fixes related to editing huge images (say 6000 x
- lots of other bug fixes and minor changes.
With all that I have completed the code reorganization and I have
almost completed the implementation of the new GUI. This week I am
working on the updated color mixer, after which I will work on the
PaintWeb packaging scripts.
Go ahead and test
PaintWeb yourself! If you want to see a list of detailed
changes, you can read the SVN commit
Anyone is welcome to provide me with feedback, suggestions, and bug
reports. Thank you!
28 May 2009, 11:55
This week I have completed my work on performance testing and
improvements for PaintWeb on the OLPC XO laptop.
During testing it became obvious that something other than the
actual Canvas painting was very slow on the XO. The main
performance culprit is that the default Gecko-based
browser is configured to render pages using 134 DPI instead of the default 96 DPI. Generally
web browsers render pages using 96 DPI. If the XO web browser would
do the same the texts and the images would be far too small - the
XO display is an
odd 200 DPI screen perceived as 134 DPI.
PaintWeb's drawing performance was hugely affected by the bilinear
scaling of the Canvas elements being done by the browser on the XO.
When I configured the browser to render the page using 96 DPI, the
web application became a lot more responsive.
Langhoff, my mentor, got in contact with Robert O'Callahan from
Mozilla. He provided us with lots of help in finding a solution for
the performance issue.
We did think about having a CSS property to change the DPI only
for the Canvas elements, or a different CSS property to disable
scaling, or some proprietary API for changing the DPI on a single
page. None of these are good ideas, because they allow web
developers to start coding for specific DPIs - this is not desired.
Gecko scales pages using integer scaling factors - that's 1, 2, 3,
etc - it doesn't use floating point numbers. In a normal Gecko
build the scaling factor for 134 DPI is 1 - because 134 / 96 = 1,
so you do not get any scaling. You can have a scaling factor of 2
or higher if you go above 192 DPI.
is patched on the XO in a way that it forces the browser to
scale pages using floating-point scaling factors as well.
Therefore, for 134 DPI the pages are scaled and they look really
good on the XO screen.
The final solution which I implemented into PaintWeb is to simply
scale down the Canvas elements in my document. If I accurately
scale down the elements, Gecko is sufficiently optimized to cancel
any scaling and you do not notice any performance impact. This
works really great.
In Gecko 1.9.1 (Firefox 3.5) I can detect the
DPI used for rendering the page with CSS 3 Media Queries.
I use this in PaintWeb. However, the XO only has Gecko 1.9.0 for
now, so I cannot determine the DPI. I am forced to do user agent
sniffing to check if the browser runs on the OLPC XO. If it does,
then I scale down the Canvas elements using a different way of
calculating the scale-down factor - because Gecko is patched - and
I always consider the page is render using 134 DPI. Fun, huh? ;)
On Opera, on the XO, I did all my
testing using 100% zoom level. It ran much better than Gecko, for
obvious reasons (no scaling, yay). Once I fixed the Gecko scaling
issue, Opera came second. For some reason Canvas draws much faster
in Gecko than in Opera on the OLPC XO.
Opera cannot render pages using different DPI values other than 96.
People use zoom, so, for consistency, I use an old trick to
measure the zoom level (thanks Arve). Based on this I scale
down the Canvas elements. For some zoom levels, like 200%, the
scaling is cancelled and PaintWeb works better. Unfortunately,
Opera does not allow non-integer pixel values, thus the
scaling-down is generally not effective...
Another important performance improvement in PaintWeb is the use of
timer-based canvas drawing. This means that mouse move events are
either cancelled or coalesced into one. For example, redrawing a
polygon with a lot of points for every mouse move is very slow. The
tools in PaintWeb use timers to update the canvas every few
milliseconds. This approach makes PaintWeb feel faster.
Lastly, I now avoid going into the global scope, for things like
Math.round or such. The importance of this change is
- not too much code is executed for each mouse move event. Such
changes become more important the more code you run. This will be
important for the color space visualization I have.
The loading performance will improve greatly once I will make a
packager for PaintWeb. Additionally, I will continue to constantly
check the overall performance of the web application on the OLPC
Go ahead and try PaintWeb from SVN
trunk. Lots of thanks to Robert for his great help and to Martin
for his assistance and for finding the Gecko patches.
Currently I am working on the new user interface, stay tuned!
Update May 31, 2009: Just published a page on the
OLPC wiki about the HTML Canvas
performance on the OLPC XO laptops. The page includes code
snippets explaining how to work-around the scaling issue.
14 May 2009, 11:09
I have been working on the PaintWeb code refactoring
and now I am nearing completion. The initial PaintWeb 0.5 alpha
code was more of a demo - it was all in a single big script. I have
now added jsdoc comments almost everywhere and I did split the code
into multiple files - per tools, per extensions, per language, and
more. I have also made important changes to the API. Now any external
code can easily add/remove tools, extensions and keyboard
For more developer-related information please read the latest forum
thread I posted on the Moodle forums.
For teachers and potential users of PaintWeb inside Moodle, I have
prepared a list of questions on how
you would use the paint tool in Moodle.
Martin, my mentor, suggested early in my GSOC application process to also
apply for the OLPC Contributors program. So I
did, and my project was accepted.
Even if the OLPC XO has a slow CPU by today's expectations, it's
only 400 Mhz, the system works quite nicely. It has 256 MB of RAM
and 1GB of disk capacity. The Sugar interface and the activities
provided are amazing. People who hear about these laptops do not
know to appreciate the numerous doors such laptops open, doors to
knowledge, for all those children who receive them. They help a lot
in learning about computing, maths, music, and more.
The Sugar interface is quite well thought-out. I like the concept
of having the neighbourhood, group, home and activity views.
The default browser, is some Python application embedding Gecko -
on par with Firefox 3.0. The performance of the browser is lacking.
Opera 10 alphas
start much faster and feel snappier. The paint tool feels sluggish
The Gnash plugin
is more of a problem rather than a solution. I installed Flash
Player 10, which is sluggish, but at least it works. The system can
play Youtube high-quality videos and even uncompressed DVD videos,
with Mplayer over the
wireless connection. Flash Player cannot play Youtube videos.
Battery life is good - I can use it about three hours without any
Since last week I have been working on the performance of the
PaintWeb application, with the OLPC XO-1 laptop. After several
tests, I have managed to improve things sufficiently such that the
paint tool is now usable in Opera 10 on the XO. Unfortunately, in
Browse.xo it's not, at least not by default.
The main performance culprit affecting PaintWeb on the XO is their
use of layout.css.dpi. Gecko allows users to change the
DPI used for rendering Web
pages, in order to makes fonts and images smaller or bigger. So, on
the XO the browser is set to use DPI 134, instead of DPI 96. This
makes the fonts and images render bigger - with DPI 96 they would
all be way too small. PaintWeb and all the pages feel much slower
because Gecko performs bilinear image resampling.
When I set layout.css.dpi to 96, drawing in PaintWeb
becomes real-time. I was amazed to see it works so well. It's like
on my desktop computer. And ... it's even faster than in Opera 10.
If you want, check out the
performance tests yourself. Spoiler: Webkit is the fastest and
Gecko is the slowest when running synthetic tests. Obviously, more
performance tests will come - these are only limited to the pencil
tool and to the main
ev_canvas() event handler from
Next on my of list things to do is a new GUI and a packager for the entire
code. Loading PaintWeb is now slower due to the amount of code
comments and the increasing number of files. The packager will
compress/minify all the files into a single one.
That's all for now. Any feedback is welcome!
23 April 2009, 14:58
I have great news this time! I have applied to work for the
Moodle project over the summer
within the Google Summer of
Code program. My project
proposal has been accepted. This means that over the summer I
will be working on integrating the PaintWeb project into
Moodle. Part of this work will also include a complete code
reorganization and several important improvements.
Locally I have already started working towards code reorganization
and a complete rework of the keyboard shortcuts support inside
PaintWeb is ready. This work will become public very soon.
I am really glad to be working with one of the best open-source
educational software. The Moodle community has been very nice and
they welcomed me warmly. Congratulations to every student who has
been accepted this year!
On a related note, Opera Software has published a tutorial I wrote
about how you
can start developing your own paint tool. The code presented is
strongly based on my work for PaintWeb. Another new tutorial is now
being prepared for publishing.
Best luck to everybody and stay tuned for more!
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
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
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