I usually don't ask questions here but this issue has been bugging me for quite a while.

The issue I'm having is that when loading an image into the source of a new image object, it's not loading until the second attempt.

I've looked further into this and I believe what's happening is that: it's loading the image fine the first time, but for whatever reason it's only caching the image at the end of the button click. Meaning that on the first attempt, it has nothing to load from, but on the second attempt, it simply goes off of the newly cached image.

The javascript can be seen below:

    $(document).on('click', '#btnSelectStamp', function () {

        var imageObj = new Image();

        imageObj.id = $(this).attr("value")

        imageObj.src = "@Url.Action("GetMapStamp", "MapMaker")?imageID=" + $(this).attr("value"

        selectedHandle = {
            x: width / 2,
            y: 150,
            isActive: false,
            height: imageObj.height,
            width: imageObj.width,
            rotation: 0,
            image: imageObj,
        }

        $('#SelectImageModal').modal('hide')

        handles.push(selectedHandle)

        draw()

    });

As can be seen above, I'm setting the ID of the new image as what is sent through the button click. The reason for this is because I'm loading the image dynamically through the controller. Then at the point of contention it is setting the image source to a url action.

The controller code can be seen below:

    public IActionResult GetMapStamp(string imageID)
    {
        MapStampItem objMapStamp = MapStampItem.Load(new Guid(imageID));


        return File(objMapStamp.MapStamp, "image/jpeg");

    }

If any more details are needed, please don't hesitate to ask.

Thanks in advance.