0

For the google+ feedback, how does it 'cut' its black overlay (a white rectangle) to create the highlight effect for its feedback, without cutting the html page? From this post, How does the Screenshot part of the Google+ Feedback system work?, I know that the highlights and blackouts are < div > tags and < canvas > tag.

I found a similar feedback in this website http://hertzen.com/experiments/jsfeedback/examples/combination/index.html, its highlight effect is also < div > tag and it uses CSS. However, its white rectangle is stack on top of the black overlay instead of 'cutting' through it. Hence, the highlight is not as clear as google's. Any insights on how google's feedback highlight function works? Is it through using canvas globalCompositeOperation? I tried to modify the codes to use canvas globalCompositeOperation, destination-out operation, but it cuts through the black overlay and html page. But it could be just me coding wrongly as I'm not very good in JavaScript. Any help would be much appreciated!!

Community
  • 1
  • 1
user1407415
  • 109
  • 1
  • 8

1 Answers1

0

The best is you try the google+ feedback and analyse it with firebug(or some other dev. tool) At first they make a snapshot from the website with canvas i think. Then they put in a div to grey out the website. Now comes the tricky part. when you highlight an area, in the div that greys out the site google puts hundreds of div's wrapping around the highlighting div. So the highlighting div has no background and the other divs are to grey out the rest.

I think because of this in g+ you can't easily drag the highlight div and place it some pixels more to the left.

At the moment i can only try to copy this way or find another way to highlight with full sight and not one grey percent in the highlighting div

user2443818
  • 1
  • 1