Get x1 y1 x2 y2 Coordinates of a line drawn on an Image

JavaScript
929 
      shape.setAttribute(input.id, input.value);
      showSVGCode();
      var code = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML = escapeHTML(code);
      return;
    }
930

With that new line in there, var code and document.getElementById should be lines 198 and 199. Copy those two lines, and paste them in to the showSVGCode() function at line 185

931

A link to that updated code, will help the next and last part of extracting the function go much easier.

932
933

Okay. The lines are at 185 and 186 where they are supposed to be, that is good.
Lines 199 and 200 are where they came from, and those two lines can now be deleted.

And you’re done. Two lines of code have been extracted out to a separate function.

934

What lines again: deleted? I updated.

935

After that update, it’s lines 205 and 206 that get to be deleted.

936
937

Good one. Does updateShape still work? Time to test the code to see if it still works after making those changes.

938

When the active stroke occurs, it’s going to mess up the SVG code shown at the bottom of the screen.
We can be proactive and fix that, before it becomes a problem.

We fix it just before we show the SVG code, by removing from the active shape the attribute called stroke-width.
Then, after the code has been shown we can put the stroke-width back on the active shape.

What that means, is adding a line of code to the start of the showSVGCode function, and another line at the end of the function.

939

We will need to create another function called getActiveShape, to make adding those two lines nice and easy to do.
That getActiveShape function can be added just below the getShape function, by adding this code at line 143

function getActiveShape() {

}
940 
      }
      return shape;
    }
function getActiveShape() {

}
    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
941

To get the active shape, we need to know which one is currently selected in the select box;

So, first we get the current index of the select box, by putting the following code in the getActiveShape function

var lines = document.getElementById("lines");
var index = lines.selectedIndex;
var option = lines.options[index];

And then we can use that color to retrieve the shape, by adding the following to the end of that getActiveShape function

return getShape(option.value);

Using color to tell them apart is not optimal, but it currently works and we can use more flexible techniques later on if needed.

942 
function getActiveShape() {
var lines = document.getElementById("lines");
var index = lines.selectedIndex;
var color = lines.options[index].value;
return getShape(color);
}
943

Good one, we can now use that getActiveShape function by replacing a nearby line below, with an updated line.

Remove:

shape = getShape(this.value);

And replace it with:

shape = getActiveShape();

That will help us to test things to make sure that the getActiveShape function is properly working.

944
945

Selecting different lines puts different information in the input fields, so that getActiveShape function is now confirmed to work properly.

We can now use getActiveShape() in the showSVGCode function to help us out there too.

946 
function showSVGCode() {
      var code = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML = escapeHTML(code);
      getActiveShape()
}
947

At line 196, add the following line at the start of the showSVGCode function to remove any stroke-width attribute from the shape:

getActiveShape().removeAttribute("stroke-width");

Then add the following to the end of the showSVGCode function to put back on that active stroke width:

getActiveShape().setAttribute("stroke-width", document.getElementById("active"));
948