HTML5 Image .scale(0, 0) Kills All Canvas Drawing?

[JeZxLee]

HTML5 Image .scale(0, 0) Kills All Canvas Drawing?

 

Hi,

 

Working on our HTML5/JS 2-D game engine now.

I found something really strange:

When we scale an HTML5 image with ".scale(0, 0)" it destroys all canvas drawing?

Not sure why?

 

Jesse

 

Here is the image drawing function:

function DrawSpriteOntoCanvas(index, x, y, scaleX, scaleY, rotationDegree, alpha, red, green, blue){    if (scaleX === 0 && scaleY === 0)  return;        var imageToDraw;    var imageToDrawWidth = 0;    var imageToDrawHeight = 0;        if (index < 101 || index > 166)    {        imageToDraw = new Image();        imageToDraw = ImageSprites[index];        imageToDrawWidth = ImageSprites[index].width;        imageToDrawHeight = ImageSprites[index].height;    }    else    {        imageToDraw = document.createElement("canvas");        imageToDraw.width = "39";        imageToDraw.height = "30";        imageToDrawWidth = 39;        imageToDrawHeight = 30;        imageToDraw = ButtonsWithCharsCanvases[index-100];    }    var computedCenterX = Math.floor(imageToDrawWidth / 2);    var computedCenterY = Math.floor(imageToDrawHeight / 2);        ctx.save();    ctx.globalAlpha = alpha;    if (rotationDegree !== 0)    {        ctx.translate(computedCenterX, computedCenterY);        ctx.rotate( DegToRad(rotationDegree) );        ctx.translate(-computedCenterX, -computedCenterY);    }    if (red !== 255 || green !== 255 || blue !== 255)    {	var buff = document.createElement("canvas");	buff.width  = imageToDrawWidth;	buff.height = imageToDrawHeight;	if (red !== 255)	{	    var ctxRGB  = buff.getContext("2d");	    ctxRGB.drawImage(imageToDraw, 0, 0);	    ctxRGB.globalAlpha = (red / 255);	    ctxRGB.globalCompositeOperation = 'source-atop';	    ctxRGB.drawImage(ImageSprites[1], 0, 0);	    	    ctxRGB.globalAlpha = 1;	    	    imageToDraw = buff;	}	if (green !== 255)	{	    var ctxRGB  = buff.getContext("2d");	    ctxRGB.drawImage(imageToDraw, 0, 0);	    ctxRGB.globalAlpha = (green / 255);	    ctxRGB.globalCompositeOperation = 'source-atop';	    ctxRGB.drawImage(ImageSprites[2], 0, 0);	    	    ctxRGB.globalAlpha = 1;	    	    imageToDraw = buff;	}	if (blue !== 255)	{	    var ctxRGB  = buff.getContext("2d");	    ctxRGB.drawImage(imageToDraw, 0, 0);	    ctxRGB.globalAlpha = (blue / 255);	    ctxRGB.globalCompositeOperation = 'source-atop';	    ctxRGB.drawImage(ImageSprites[3], 0, 0);	    	    ctxRGB.globalAlpha = 1;	    	    imageToDraw = buff;	}                buff = null;        delete buff;    }    if (scaleX !== 1 || scaleY !== 1)    {        ctx.scale(scaleX, scaleY);        if (scaleX < 0)  x = (x * -1);        if (scaleY < 0)  y = (y * -1);    }    ctx.translate(-imageToDrawWidth * 0.5, -imageToDrawHeight * 0.5);    ctx.drawImage(imageToDraw, x, y, imageToDrawWidth, imageToDrawHeight);    ctx.globalAlpha = 1;    ctx.restore();}

[rich]

But a scale of 0 is, well, nothing. It's invisible. So nothing should render. In fact you should be checking right at the start of your render loop if the object has a scale of 0 (on either axis) or an alpha of 0 and just stopping right there and moving to the next object, because it's a waste of processing time doing anything with it from that point on, and things like context saving and restore are quite expensive so you want to minimise that as much as possible.

[JeZxLee]

Hi,

 

There should be some "sanity" check by HTML5 itself?

Passing (0, 0) to ".scale" crashes the HTML5 canvas and nothing more is draw?

I added "if (scaleX === 0 || scaleY === 0) return;" to the top of my HTML5 image drawing function for now...

 

Jesse

[rich]

context.scale(0, 0) definitely does not 'crash' the canvas. If it does there's something in your code causing it.

[JeZxLee]

Hi,

 

I am still learning and am no expert.

I'll look again at me code, thanks!

 

Jesse

[rich]

Try boiling it all down to a few lines of JS, and just add bits back in until it breaks. I assume you don't actually get any kind of error message, or it'd be easier to debug.

[chg]

NB: I think this has more or less moved to http://www.html5gamedevs.com/topic/19030-html5-scale-values-1-ok-values-1-bad/ same code, similar report of issues, but now for values greater than 1