How to fix click coordinates in processing.js when canvas uses css 2d transforms?

I'm trying to learn canvas/processing.js, and the first thing I tried was getting the abstractjs demo (available here or here and use it in a starting point for something new.

The thing is, I use css 2d transforms at some point, and that seems to mess with canvas click coordinates - when I click the mouse button, the graphics pop-out not from under it, but are translated a bit - This is easy to reproduce on the demo site开发者_运维问答s I mentioned (just apply -*-transform: translate(whatever)) to the canvas element and you should see the same effect.

Is there a simple workaround for this or is it a processing.js bug?

It's not a bug, but intended behaviour: since you're using a Processing sketch, you're not supposed to use CSS to effect changes in your sketch, you use code in your sketch instead. So, if you want to perform changes based on page interaction, you simply make the page call a method in your sketch using javascript, as described in http://processingjs.org/reference/articles/PomaxGuide#jstosketch