Mouseover panning image within container Javascript for Html Canvas

All I want is to create a layer with a big image,  a layer with a rectangle within that rectangle you can pan around the image using code.

However this needs to be for Html canvas and exported as an oam file so an actionscript 3 code will not work.

Well it does seem quite basic however I haven't managed to find a solution on the interent so its actually probaby quite challenge.

Tried to covert the videos code to javascript

// Set variables for numbers we need in our equations

var activatorWidth:int = activator.width;

var activatorHeight:int = activator.height;

var boundX:int = bigPic.x + activator.x * 2;

var boundY:int = bigPic.y + activator.y * 2;

var diffX:int = bigPic.width - activatorWidth;

var diffY:int = bigPic.height - activatorHeight;

var easeSpeed:int = 7;

// Function that activates the movement (MOUSE_OVER activator)

function activate(event:Event):void {

  var divX:Number = mouseX / activatorWidth;

  var divY:Number = mouseY / activatorHeight;

  var moveX:Number = divX * diffX;

  var moveY:Number = divY * diffY;

  bigPic.x += (boundX - moveX - bigPic.x) / easeSpeed;

  bigPic.y += (boundY - moveY - bigPic.y) / easeSpeed;

}

// Listeners on the activator to Add / Remove Enter Frame Events

activator.addEventListener(MouseEvent.MOUSE_OVER, addEnterFrameEvent);

activator.addEventListener(MouseEvent.MOUSE_OUT, removeEnterFrameEvent);

// Add Enter Frame Event Function

function addEnterFrameEvent (event:MouseEvent):void {

  addEventListener(Event.ENTER_FRAME, activate);

}

// Remove Enter Frame Event Function

function removeEnterFrameEvent (event:MouseEvent):void {

  removeEventListener(Event.ENTER_FRAME, activate);

}

Need an experienced coder.