Javascript and Canvas wet paint mixing

Here is an experiment I did to learn how the HTML5 Canvas tag works. I wanted to know how to manipulate pixels so I attempted to port my AS3 paint mixing to Javascript. I was surprised by the performance although it doesn’t seem to be as fast as the Flash version, and it is definitely a lot more work getting and setting pixels with Javascript and Canvas. Check out the demo below. The brush will lag at higher drawing speeds when the size is large. But it if you don’t draw too fast it works pretty well. So far it seems to work best in Safari.

Supported browsers:

  • Chrome (Only tested in Chrome 12)
  • Safari (Only tested in Safari 5)
  • IE9

Note: Doesn’t work in Firefox and haven’t tried Opera

Posted toExperiments HTML HTML5 Interactive Javascript