How does Scratch's canvas works in terms of drawing the sprites on it and allowing direct drag n drop interaction on itself?
AFAIK you cannot move drawn images on HTML canvas by click or drag n drop interactions.

What is the technique they have employed there?

I'm not quite sure what you mean - this might be a question for Advanced Topics.

They check if mouse is down inside the canvas and if it moves. And it re-draws using the data from mouse move events.

I have guessed like that and researched about canvas to see it. But I did not know HTML5 drag n drop events dataTransfer were applicable to the images drawn in a canvas element.

And how do they know the mouse just exactly overlaps the picture? As I see it is not with a bounding polygonal approximate bounding box around an image. It is very exact. Is there a way to get this info from canvas, the path that encloses an image on it? Or do they convert the images we upload to svg maybe to have a path info from it?

I assume there are ways to create such systems using JavaScript - I once remember seeing a code that allowed you to drag&drop an image into a box to finish a game, which is pretty similar with the Paint Editor.

I did say “assume” at the beginning though, I'm not experienced in JS*.

*Didn't know? Abbreviation for JavaScript. ;)