Movable and "Zoomable" area without using canvas

I am currently developing a web-based application for visualizing data. The app is fed with a json file,formatted like this:

var theData = {
   "nodes":{
      "IBM":{
         "type":"Institution",
         "properties":{
            "founded_in":"1998",
            "director":"whoever"
         }
      },
      "Joseph":{
         "type":"Employee",
         "properties":{
            "Nationality":"bangladeshi"
         }
      },
      [...]
   },
   "edges":{
      "Joseph-IBM":{
         "labeled":"Works at"
      },
      [...]
   }
} 

NOTE: The json is not entirely.

This data is loaded into the application and it will show you:

The nodes are draggables alongside the entire screen and both the lines and the label of the relationships are moved accordingly.

What would I like to?

I would like to make the surface in which the graph "lays" movable and zoomable, so the UX can be significantly improved. The way I have seen is

• by using a canvas. The problem I find, is that the canvas is the first layer and the elements that are inserted in cannot be neither hovered nor clickable (to add events, for example). I do know that those are not really problems, since there is a graph vis that uses (canvas), but I do not know how to solve it.

I am not asking you to give me the exact code (if you want, it would be much appreciated :)), but to help me in finding something to achieve a movable and zoomable surface!

I hope that everthing is clear & Thank you in advance for any help you can provide.