Draw button diagram using html5 and jQuery

Question

I want to migrate desktop application to webbase. Which have button diagram like picture below.

All button doesn't dragable. I just want to connect them with line. This may a silly question. But I am new in web development. I read some advice that i can use html canvas or using js library. But, I don't know how or where to start. Or is this possible using html5 and jquery only without any plugin?
Or even pure html5? Please help.

Answer 1

There are two solutions for this problem:

1. Either you will have to draw the whole structure using button tags and html5 canvas, or

2. just make a div, place your image(which already has the structure) in its background and absolutely position the button tags where you want them to be.

I'll recommend the second solution, it is quick fix. Below I have mention an example for the reference

  div{ background: url(http://i.stack.imgur.com/Bw9Zj.jpg) no-repeat; height: 300px; width: 800px; } button { position: absolute; top: 57px; left: 306px; width: 161px; height: 29px; } 

  <div></div> <button>Switch the kenator</button>