Crop image in HTML5

Question

I am using below given fiddle to apply zoom in and zoom out on my canvas image, but when i zoom out my image it shows multiple images slices. This problem does not show in fiddle possibly because its image background is white. If any one knows how to solve this problem kindly give an idea about it. Thanks

Answer 1

It sounds like you forget to clear your canvas between each draw :

http://www.w3schools.com/tags/canvas_clearrect.asp

Answer 2

context.clearRect(0, 0, canvas.width, canvas.height);

请注意，对于clearRect，您需要具有未转换的上下文，或者需要跟踪您的实际边界。