As for the creating of a Clink 'N Drag rectangle, I rewrote the code to become this. It looks like it's working just fine.
Now, for the SVG part, I'm not sure how you'd go about incorporating SVG into canvas. Have a look at this library instead: http://fabricjs.com/
For the task of detecting if your selection box is covering a SVG, I can give you the following suggestions:
- Store the startX, startY, stopX, stopY as the mouse releases.
- Loop through all SVG files
- Check if there's a overlap, perhaps like so:
.
if ((svg.startY+svg.height) < startY) {
return false; // svg too high
} else if (svg.y > stopY) {
return false; // svg too low
} else if ((svg.x + svg.width) < startX) {
return false; // svg too far left
} else if (svg.x > stopX) {
return false; // svg too far right
} else {
// Overlap
return true;
}