How to deal with zoom in, zoom out and press "full screen" issue in canvas?

I want to let a canvas exactly overlaps a image with css height = 100% http://clec.twbbs.org/Screenshot.pn开发者_如何学Pythong ? However when I zoom in, zoom out or press "full screen", canvas doesn't match the size of image http://clec.twbbs.org/Screenshot-2.png . I am wondering to know how could I solve this problem.

thanks a lot

Without seeing your source I would suggest adding a wrapper around the image and canvas tag.

<div id='wrapper'>
    <img/>
    <canvas/>
</div>

Then the canvas element wouldn't expand beyond the bounds of the wrapper.

Another way is to bind an event to window.resize and make the canvas element equal the width/height of the image element.