这个是我改造的，在IE浏览器也可以放大最边缘的地方，不需要判断sx和dx，可以是任意大小的图片

var canvas = document.querySelector("#canvas");
var cxt = canvas.getContext("2d");

var offCanvas = document.createElement("canvas");
var offCxt = offCanvas.getContext("2d");

var img = new Image();
var isMouseDown = false;

var scale = 2;

window.addEventListener("load",function(){
	img.src = "images/a.jpg";
	img.addEventListener("load",function () {
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        cxt.drawImage(img,0,0,canvas.width,canvas.height);
    },false);
},false);

function windowToCanvas(x, y){
	var bbox = canvas.getBoundingClientRect();
	return {
		"x": x - bbox.left,
		"y": y - bbox.top
	};
}

canvas.addEventListener("mousedown",function(event){
	event.preventDefault();
	var point = windowToCanvas(event.clientX, event.clientY);
	isMouseDown = true;
	
	drawCanvasWithMagnifier(isMouseDown,point);
	
},false);

canvas.addEventListener("mousemove",function(event){
	event.preventDefault();
	if(isMouseDown){
		var point = windowToCanvas(event.clientX, event.clientY);
		drawCanvasWithMagnifier(isMouseDown,point);
	}
},false);

canvas.addEventListener("mouseup",function(event){
	event.preventDefault();
	isMouseDown = false;
	drawCanvasWithMagnifier(isMouseDown);
},false);

canvas.addEventListener("mouseleave",function(event){
	event.preventDefault();
	isMouseDown = false;
	drawCanvasWithMagnifier(isMouseDown);
},false);

function drawCanvasWithMagnifier(isShowMagnifier, point){
	cxt.clearRect(0,0,canvas.width,canvas.height);
	cxt.drawImage(img,0,0,canvas.width,canvas.height);
	if(isShowMagnifier){
		drawMagnifier(point);
	}
}
function drawMagnifier(point){
	var imgWidth = img.naturalWidth*scale;
	var imgHeight = img.naturalHeight*scale;
	var mr = 200;
	
	var sx = -point.x*scale+mr;
	var sy = -point.y*scale+mr;
	
	var dx = point.x - mr;
	var dy = point.y - mr;
	
	offCanvas.width = 2*mr;
	offCanvas.height = 2*mr;
	offCxt.drawImage(img,sx,sy,imgWidth,imgHeight);
	
	
	cxt.save();
	cxt.lineWidth = 10;
	cxt.strokeStyle = "#069";
	cxt.beginPath();
	cxt.arc(point.x,point.y,mr,0,2*Math.PI,false);
	cxt.stroke();
	cxt.clip();
	cxt.drawImage(offCanvas,dx,dy,2*mr,2*mr);
	
	cxt.restore();
}

在firefox与IE下都有这问题，感谢思路

应该再加多两句

dx = dx<0?0:dx;
dy = dy<0?0:dy;

已经解决了，在微软的浏览器下drawImage的sx和sy小于0的时候会报错，要在drawImage
之前加多两句

sx = sx<0?0:sx;
sy = sy<0?0:sy;