Selecting a non-standard image area in a web application

Question

This question is for a web application.

And maybe it's a stupid question but I was wondering if there is a way to generate a polygon with 4 points, so that the user can himself drag each point to create it's own (As an example, let's say that we want to remove a window from an image that it is not at a normal angle) .Is it possible?. I can't seem to find anything after a few hours of search.

Answer 1

Look into the SVG and Canvas APIs. These will allow you to do vector drawings that can be updated via Javascript. For your stated purpose, updating the DOM of SVG documents might be easier. Canvas is more like a 2D bitmap, so you'd need to work out a lot of the drawing code yourself.

SVG Specs: http://www.w3.org/Graphics/SVG/

Canvas Specs: http://www.whatwg.org/specs/web-apps/current-work/

Note that SVG only works in IE with a plugin. Canvas works in IE only with Google exCanvas support.

Answer 2

Sounds like a job for the <canvas> tag or a Flash interface.