Scrollbar

Can someone help me with a convert a scrollbar in actionscript 3.0 to html5 canvas with javascript. Starting with
How do I code this from actionscript 3.0 to html5 canvas (javascript). this is class file in .as that I want for .js you see this:

// CLASS file as actionscript 3.0
package {
	//
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Rectangle;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	//import ph.graphic.RectScuare;
	//-----------------------------------------------
	public class Zscrolla extends Sprite {
		//
		private var holder       :MovieClip;
		private var clip         :MovieClip;
		//var clipMask     :MovieClip;
		private var dragger      :MovieClip;
		private var slider      :MovieClip;
		private var bgAlpha      :Number;
		private var bgColor      :uint;
		private var hg           :uint;
		private var scrolled     :uint;
		private var friction     :uint;
		private var currentY     :int;
		private var draggerHg    :uint;
		private var draggerColor :uint;
		private var sliderColor  :uint;
		private var fade         :Tween;
		private var fadeAmount   :Number;
		private var wheel        :Boolean;
		//------------------------------------------------------------------------
		public function Zscrolla(_clip:MovieClip, _hg:uint, _friction:uint = 5, _wheel:Boolean = false):void {
			//
			clip       = _clip;
			hg         = _hg;
			friction   = _friction;
			wheel      = _wheel;
			//
			if (clip.height > hg) {
				//
				trace(clip.height);
				trace(hg);
				createHolder();
				createMask();
				createSrollBar();
				addListeners();
			}
		}
		//---------------------------------------------------------------------------
		public function set scrollWheel(b:Boolean):void {
			//
			wheel = b;
			addListeners();
		}
		//
		public function set handCursor(h:Boolean):void {
			//
			dragger.buttonMode = h;
			trace(dragger.buttonMode);
		}
		//---------------------------------------------------------------------------
		public function scrollBarProperties():void {
			//
			draggerHg = dragger.height;
			//
			createSrollBar();
			addListeners();
			trace(draggerHg);
		}
		//---------------------------------------------------------------------------
		private function createHolder():void {
			//
			holder = new MovieClip();
			holder.x = clip.x;
			holder.y = clip.y;
			clip.x = clip.y = 0;
			addChild(clip);
			addChild(holder);
		}
		//---------------------------------------------------------------------------
		private function createMask():void {
			//
			var clipMask:MovieClip = new mmask();
			clip.mask = clipMask;
			addChild(clipMask);
		}
		//---------------------------------------------------------------------------
		private function createSrollBar():void {
			//
			//
			slider = new trackk();
			dragger = new sliderr();
			slider.x = 900;
			dragger.x = 877;
			//trace(dragger.height);
			addChild(slider);
			addChild(dragger);
		}
		//--------------------------------------------------------------------------
		private function dragOn(e:Event):void {
			//
			dragger.startDrag(false, new Rectangle(dragger.x, 0, 0, slider.height - dragger.height));
			trace(dragger.startDrag);
			trace(dragger.x);
			dragOnOutSide();
		}
		private function dragOff(e:Event):void {
			//
			dragger.stage.removeEventListener(MouseEvent.MOUSE_UP, dragOff);
			dragger.stopDrag();
		}
		private function dragOnOutSide():void {
			//
			dragger.stage.addEventListener(MouseEvent.MOUSE_UP, dragOff);
		}
		//---------------------------------------------------------------------------
		private function fadeIn(e:Event):void {
			//
			e.type == "rollOver" ? fadeAmount = 0.5 : fadeAmount = 1;
			fade = new Tween(e.target, "alpha", Strong.easeOut, e.target.alpha, fadeAmount, 0.5, true);
		}
		//---------------------------------------------------------------------------
		private function easeIn(e:Event):void {
			//
			friction > 5 ? friction = 5 : null;
			//
			scrolled = dragger.y / (slider.height - dragger.height) * 10;
			currentY = -(clip.height - slider.height) * scrolled / 9;
			clip.y += (currentY - clip.y) / friction;
		}
		//---------------------------------------------------------------------------
		private function aplyScrollWheel(e:MouseEvent):void {
			//
			dragger.y += e.delta * -4;
			//
			if (dragger.y < 0) {
				//
				dragger.y = 0;

			} else if (dragger.y > (slider.height - dragger.height)) {
				//
				dragger.y = slider.height - dragger.height;
			}
		}
		//--------------------------------------------------------------------------
		private function addListeners():void {
			//
			dragger.addEventListener(MouseEvent.ROLL_OVER, fadeIn);
			dragger.addEventListener(MouseEvent.ROLL_OUT, fadeIn);
			dragger.addEventListener(MouseEvent.MOUSE_DOWN, dragOn);
			dragger.addEventListener(MouseEvent.MOUSE_UP, dragOff);
			dragger.addEventListener(Event.ENTER_FRAME, easeIn);
			//
			if (wheel == true) {
				clip.addEventListener(MouseEvent.MOUSE_WHEEL, aplyScrollWheel);
			}
		}
		//-------------------------------------------------------------------------
	}// class
}// package

I use this instance name of the objects in fla animate.
content = innehåll / album1_mc = linking
contentMask = mask / mmask = linking
slider = button / sliderr = linking
track = line / trackk = linking

I know I use class file javascript like this for example:

class Circle {
constructor(x, y, name)
}

This the codes:

And I use this as mask:

var content = this.content1;
var mask_shape = new createjs.Shape();
mask_shape.graphics.beginFill("#ff0000").drawRect(82,163,250,5);
mask_shape.visible = false; // hiding the maskshape
content.mask = mask_shape;

In actionscript 3.0 in the fla file are on the frame for instance in movieclip.
import Zscrolla;
//-----------------------------------------------
var textoClip:album1_mc = new album1_mc;
var eScroll:Zscrolla = new Zscrolla(textoClip, 200);
//eScroll.scrollBarProperties();
//eScroll.backGround(0xFFFFFF, 0.5);
eScroll.scrollWheel = true;
eScroll.handCursor = true;
eScroll.x = eScroll.y = 0;
addChild(eScroll);

How do I do it in html5 canvas (javascript) and I don't need all that.