 			showBounds: no
 			originAtCenter: no
 			imageSmoothing: yes
-		@[k] = options[k] for k in ['container', 'width', 'height', 'fps', 'showKeyPoints', 'showBounds']
-
-		# Set DOM styles
+
+		# Copy options
+		for name in ['container', 'width', 'height', 'fps', 'showKeyPoints', 'showBounds', 'originAtCenter']
+			@[name] = options[name]
+
+		# If options.width is not given, then fillParent is true
 		@fillParent = not Bu.isNumber options.width
-		if not @fillParent
-			@dom.style.width = @width + 'px'
-			@dom.style.height = @height + 'px'
-			@dom.width = @width * @pixelRatio
-			@dom.height = @height * @pixelRatio
+
+		# Convert width and height from dip(device independent pixels) to physical pixels
+		@width *= @pixelRatio
+		@height *= @pixelRatio
+
+		# Set canvas dom
+		@dom = document.createElement 'canvas'
 		@dom.style.cursor = options.cursor or 'default'
 		@dom.style.boxSizing = 'content-box'
 		@dom.style.background = options.background
 		@dom.oncontextmenu = -> false
 
-
+		# Set context
+		@context = @dom.getContext '2d'
+		@context.textBaseline = 'top'
+		@context.imageSmoothingEnabled = options.imageSmoothing
+
+		# Set container dom
 		@container = document.querySelector @container if Bu.isString @container
 		if @fillParent and @container == document.body
-			$('body').style('margin', 0).style('overflow', 'hidden');
+			$('body').style('margin', 0).style('overflow', 'hidden')
 			$('html, body').style('width', '100%').style('height', '100%')
 
-		@context.textBaseline = 'top'
-		@originAtCenter = options.originAtCenter
-		@context.imageSmoothingEnabled = options.imageSmoothing
-
-
+		# Set sizes for renderer property, dom attribute and dom style
 		onResize = =>
 			canvasRatio = @dom.height / @dom.width
 			containerRatio = @container.clientHeight / @container.clientWidth

			@dom.style.height = height + 'px'
			@render()

		if @fillParent
			@width = @container.clientWidth
			@height = @container.clientHeight
			Bu.global.window.addEventListener 'resize', onResize
			@dom.addEventListener 'DOMNodeInserted', onResize


		tick = =>
			if @isRunning
				@clipMeter.start() if @clipMeter?
				@render()
				@trigger 'update', {'tickCount': @tickCount}
				@tickCount += 1
				@clipMeter.tick() if @clipMeter?

			requestAnimationFrame tick

		tick()

		appendDom = =>
			@container.appendChild @dom
		setTimeout appendDom, 1

		Bu.animationRunner?.hookUp @
		Bu.dashFlowManager?.hookUp @

	# Pause/continue/toggle the rendering loop
	pause: -> @isRunning = false

		@tickCount = 0
		@isRunning = yes
		@pixelRatio = Bu.global.devicePixelRatio or 1
		@clipMeter = new ClipMeter() if ClipMeter?

		# Receive options
		options = Bu.combineOptions arguments,
			container: 'body'
			background: '#eee'
