HTML5Canvas

I’ve written a canvas wrapper for Pyjamas called HTML5Canvas which subclasses GWTCanvas and adds support for additional canvas functionality to Pyjamas for the new browsers (Chrome , Firefox 3.5+, Safari, IE9). The wrapper that I submitted doesn’t implement ImageData wrapper correctly so that functionality is still buggy, I have a better working version that I’m still trying to debug. The following functionality has been added to the wrapper (everything except the first bullet works correctly):

  • create/get/putImageData()
  • setting shadows
  • ability to set font, alignment and size, as well as measure text width in pixels
  • saving canvas to PNG/JPG image
  • clipping current path and ability to clear only part of canvas (useful for implementing more efficient redraw methods in web apps)

I have not implemented any of this functionality for IE-specific modules, therefore if using Internet Explorer 8 or older, calling new methods will throw “Not Implemented” exception. If you’re interested, it shouldn’t be too hard to add support for shadows (offset path and draw that before drawing actual path to canvas) or even measureText (the default font is 10px Times New Roman, so you can measure pixel width of each letter and generate a dictionary mapping letters to widths). I have also written an app very similar to Microsoft Paint to showcase the power of new canvas functionality. Unfortunately, after last few Pyjamas updates my Paint app broke and I didn’t yet have the time to get it working again. I will post it once it is fixed.

This entry was posted in Frameworks and tagged , , by Alexander Tsepkov. Bookmark the permalink.

About Alexander Tsepkov

Founder and CEO of Pyjeon. He started out with C++, but switched to Python as his main programming language due to its clean syntax and productivity. He often uses other languages for his work as well, such as JavaScript, Perl, and RapydScript. His posts tend to cover user experience, design considerations, languages, web development, Linux environment, as well as challenges of running a start-up.

3 thoughts on “HTML5Canvas

  1. I apologize I didn’t notice the comment earlier. I haven’t updated the app to work with Pyjamas, however, I’ve modified it to run on RapydScript. It’s now one of the examples included with the language.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>