       width: rect.width
       height: rect.height
 
+    @_computeArea segments
     @_precomputeHover segments
 
     @_$highlight = $('<div/>').addClass('highlights-layer-highlight').append(

        @_$highlight.removeClass 'hovered'
        @_hideHover()

    @_$highlightsLayer.append @_$highlight

  # React to changes in the underlying annotation
  annotationUpdated: =>

    context = @_highlightsCanvas.getContext('2d')
    context.clearRect 0, 0, @_highlightsCanvas.width, @_highlightsCanvas.height

  _sortHighlights: =>
    @_$highlightsLayer.find('.highlights-layer-highlight').detach().sort(
      (a, b) =>
        # Heuristics, we put smaller highlights later in DOM tree which means they will have higher z-index
        # The motivation here is that we want higher the highlight which leaves more area to the user to select the other highlight by not covering it
        # TODO: Should we improve here? For example, compare size of (A-B) and size of (B-A), where A-B is A with (A intersection B) removed
        $(b).data('highlight')._area - $(a).data('highlight')._area
    ).appendTo(@_$highlightsLayer)

  _createHighlight: =>
    scrollLeft = $(window).scrollLeft()
    scrollTop = $(window).scrollTop()
