Browser-based HTML5 drawing app/PDF markup tool

We are looking for someone to design a browser-based (Safari, Firefox) markup/CAD tool to let us put objects, (symbols that we can custom create as small vector objects, such as a circle with a 1 in it, or a solid-filled triangle, say) onto a PDF drawing as a separate layer, but also draw lines and bezier curves on that layer to say, join a number of lights to their respective light switch. We have become accustomed in our current CAD system to our objects having 'magnetic' properties, whereby a curve drawn toward it 'snaps' to join it. A feature we wish to retain, among others . We also wish the system to track the occurrences of all objects, as they are to be separately tracked and costed in a separate database. Imagine have a PDF drawing of a house plan, and being able to place symbols for power points, lights and their circuit links to switches, data points, etc, with the ability to add text notation. We currently use a Mac application called Omnigraffle, with customised stencils for all of our electrical symbols, and produce a bill of materials of items placed on our house plans by using an Excel spreadsheet with columns ITEM CODE, DESCRIPTION, QTY and manually enter the quantity of say, certain TYPE 1 lights, because Omnigraffle tracks the number of a certain object and provides that value. Having this application made is an alternative to Applescripting these two applications to talk to each other, and being browser-based wants to leverage the apparent power of HTML5 and maybe SVG as a vector standard. The key for us is portability of design so that it can easily be ported to becoming an iPad/Android multitouch environment application for use in the field, where zooming into a section of the plan would allow fine detail work when not in front of a 24 inch monitor like the desktop version. Cheers