I have a reference how to load an image from a file:
but I don't know how to manually load the image by inputting or giving a string parameter that contains path file (e.g. C:\myImage\img12.jpg)
in the link, the image is directly load from the file dialog.
Indeed, to my knowledge there is no established or even mildly known way to load local files programmatically due to security policies.
Aside from that you may want to use the onload handler on img to be sure that the image is loaded when you draw it on canvas. At the moment in some cases where the image is too big or the computer is slow you may not get the image rendered.
Check demo: http://jsfiddle.net/eD2Ez/38/
Experimental / Future
However, there could be a light on the horizon. There is something called FileSystem API in the works but didn't work for me (although it should).
Firstly the FileSystem API is currently implemented under vendor prefix on Chrome version 21+.
Also you have to use the flag --allow-file-access-from-files when you launch Chrome.
But even with all this, I still didn't manage to make it happen with Chrome v21 and still get SECURITY_ERR.
Check the "demo": http://jsfiddle.net/MQFGd/2/
Sources:
$('<img src="'+img.src+'"/>').insertAfter('#cvs');
Here is demo http://jsfiddle.net/eD2Ez/32/
drawImage() to draw this image to a canvas ... but you will not be able to manipulate this canvas any more because the image is considered 'not domain safe'.