Detect start and end of a processing task in JavaScript

Question

I'm doing image editing using the canvas. Consider the following code:

ctx.drawImage(  // <-- start point of the task which causes the browser to lag
    image,
    crop.x * scaleX,
    crop.y * scaleY,
    crop.width * scaleX,
    crop.height * scaleY,
    0,
    0,
    crop.width * scaleX,
    crop.height * scaleY,
);             // <-- end of the task

Is there a way that I could detect start and end point of a intensive process? My goal is to show a loading indicator, something like Photoshop when you open a large photo. And hopefully keep the whole page responsive and not lag completely.