The situation is : I have to draw an image on canvas dynamically. The code is :

HTML :

<canvas id="canvas" width="500px" height="300px"></canvas>
<input type="file" id="file-input">

jquery :

$(function() {
    $('#file-input').change(function(e) {
        var file = e.target.files[0],
            imageType = /image.*/;
        
        if (!file.type.match(imageType))
            return;
        
        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);
        
    });
    
    function fileOnload(e) {
        var $img = $('<img>', { src: e.target.result });
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');

        $img.load(function() {
            context.drawImage(this, 0, 0);
        });
    }
});

It adds the image to the top left corner. But now I might need to shift the image to another position by dragging and dropping. Also, I need to resize the image in similar way. For that I need to select the image (by getting reference to that image) on mouse click. I could have done that by checking if the mouse click coordinates overlaps with any image area. But if there are large number of images, this way will be inefficient (storing images in array and checking with each of them). Is there any more efficient way ?

PS : I am trying to build a UI designer which generates UI by dragging and dropping the elements in angular. I just started with the image element.

Edit 1 - I could use Fabric.js canvas instead. But still I would like to know if this can be done on native canvas too.