HTML5 Canvas drawImage大小调整问题

Question

When I resize an image that I pull from a specific location on a spritesheet using drawImage, it appears as if drawImage will sometimes pull outside the source x + source y / swidth + sheight boundaries.

The following jfiddle illustrates what is happening: https://jsfiddle.net/cxuxyLj2/

The pertinent code is as follows:

drawingSurface.drawImage(heroSprite, 0, 64, 32, 64, 20, 144, 32, 64);
drawingSurface.drawImage(heroSprite, 0, 64, 32, 64, 20+50, 144, 32*2, 64*2);

There are lines that show above the RESIZED sprite's head (probably pulling the shoe of the same character on the first row), but not the original sprite's head.

My question is - can it be confirmed that this is a legitimate drawImage error, or am I doing something wrong?

Answer 1

It's actually because of the anti-alias when rescaling your sprite.
Because you do draw in a loop, without ever clearing the context, the anti-alias artifacts becomes bigger and bigger :

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; render(); function render () { setTimeout(render, 1000); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20, 25, 32, 64); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20+50, 25, 32*2, 64*2); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 150.6666687774, 25.33333222227, 32,64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

You could avoid it by setting the imageSmoothingEnabled flag to false but it wasn't supported in IE prior to 10 ...

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); drawingSurface.mozImageSmoothingEnabled = false; drawingSurface.webkitImageSmoothingEnabled = false; drawingSurface.msImageSmoothingEnabled = false; drawingSurface.imageSmoothingEnabled = false; var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; render(); function render() { setTimeout(render, 16); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20, 25, 32, 64); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20 + 50, 25, 32 * 2, 64 * 2); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 150.6666687774, 25.33333222227, 32, 64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

...or by clearing the canvas at each call, you may avoid the artifacts to grow, but there will still be natural ones...

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; render(); function render() { setTimeout(render, 16); drawingSurface.clearRect(0,0,canvas.width, canvas.height); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20, 25, 32, 64); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 20 + 50, 25, 32 * 2, 64 * 2); drawingSurface.drawImage(heroSprite, 0, 32, 32, 64, 150.6666687774, 25.33333222227, 32, 64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

... so a final solution would be to use a buffer canvas, to only draw your sprite at normal scale (less anti-aliasing possible), then redraw this buffer canvas at the wanted scale, you will keep in-image's anti-aliasing artifacts, but won't eat the border's of the cropped area anymore :

 var canvas = document.querySelector("canvas"); var drawingSurface = canvas.getContext("2d"); var heroSprite = new Image(); heroSprite.src = "http://gopus.xepher.net/game/gfx/herosprite7.png"; var spriteCanvas = document.createElement('canvas'); var spriteCtx = spriteCanvas.getContext('2d'); var croppedSprite = function(x, y, width, height){ spriteCanvas.width = width; spriteCanvas.height = height; spriteCtx.drawImage(heroSprite, x, y, width, height, 0,0, width, height); return spriteCanvas; } render(); function render() { setTimeout(render, 16); drawingSurface.drawImage(croppedSprite(0, 64, 32, 64), 20, 25, 32, 64); drawingSurface.drawImage(croppedSprite(0, 64, 32, 64), 20 + 50, 25, 32 * 2, 64 * 2); drawingSurface.drawImage(croppedSprite(0, 64, 32, 64), 150.6666687774, 25.33333222227, 32, 64); } 

 <canvas width="400" height="400" style="border:1px solid #000"></canvas> 

Also, you should definitely add more space between your sprites.