HTML5 .scale() - Values < 1 OK, Values > 1 Bad?

[JeZxLee]

HTML5 .scale() - Values < 1 OK, Values > 1 Bad?

 

Hi,

 

We are working on our HTML5 graphic core now.

Our HTML5 image drawing function supports vertical and horizontal scaling.

When we pass values < 1 the images are properly scaled down.

When we pass values > 1 the images are not draw to the canvas and there are no errors in console?

 

Look below for HTML5 image drawing function.

Any help would be appreciated, thanks!

 

Jesse

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 * scaleX, -imageToDrawHeight * 0.5 * scaleY);    ctx.drawImage(imageToDraw, x, y, imageToDrawWidth, imageToDrawHeight);    ctx.globalAlpha = 1;    ctx.restore();}

[chg]

I don't see an issue, maybe though I'm guessing you're out with your transform and possibly drawing over the edge of the screen when the values are large?

Suggestion but, why don't you apply your translation to make the centre of the sprite the canvas origin before applying scaling, seems like superfluous multiplication to set the scaling only have to account for it and do the inverse[?]... actually either that's not your intention or unless I'm mistaken shouldn't you be dividing by scaleX & scaleY rather than multiplying?

EDIT: Why don't you look into calling mozCurrentTransform() / currentTransform() [ https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/currentTransform ] to get the current tranform matrix? Then you can multiply that by the coords of your sprites to see for yourself what vales are being produced