PaintWeb in Internet Explorer

26 June 2010, 13: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, 08: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.

New article: SVG or Canvas?

17 February 2010, 06:30

Just a quick note to people around here: Opera Software has recently published a new article I wrote: SVG or Canvas? Choosing between the two. You can also read the article on my server. As usual, thanks go to Chris Mills for reviewing and providing feedback for improvements to the article.

In unrelated news, things are going fine around here. A new web site I've been working on will be released to the public pretty soon. More cool stuff will come. ;)

Published in: canvas, opera, svg, tutorials.

PaintWeb - contributors wanted

16 October 2009, 04:17

PaintWeb is an open-source web-based paint application usable as a component within any other web application. From a technical perspective, the application uses very well known technologies like JavaScript, HTML 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 project.

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 you a programmer? Then you can work on the JavaScript code, you can 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 already planned.

If you want to join this project then get started by sending an email to the mailing list at paintweb@googlegroups.com, or just contact the project author.  

Acest articol este scris în limba engleză. O traducere în limba română este disponibilă.

Published in: open-source, paintweb.

PaintWeb - se caută contribuitori

16 October 2009, 04:16

This post uses the Romanian language. A translation in the English language is also available.

Published in: paintweb, romanian, software-liber.