Introduction
I had a task to create a JS component which will build the halls scheme. I decide to use HTML5 canvas and SVG as an image for chairs. Canvas - because he is a fast. SVG - for easy scaling.
 |
| "Ghost" canvas for medium hall |
 |
| Simple example |
I also need to understand, which the place are chosen by user when he clicked on it. The main highlight is that the seat may be of any arbitrary shape and be rotated to any angle. Specially for this I draw an invisible canvas with chairs where each chair painted in unique color.
Once I have a copy hall scheme on invisible layer I can find a chair what user clicked by picking color of the invisible chair on mouse hover (don't confuse it with JS onmouseover event). But here is waiting for us a little surprise. I can draw SVG on canvas, but I can't call such methods: context.getImageData and canvas.toDataUrl! What's the matter?
