HTML5 Image Flip Horizontally/Vertically?

[JeZxLee]

HTML5 Image Flip Horizontally/Vertically?

 

Hi,

 

I am trying to figure out how to properly flip an HTML5 image horizontally and vertically.

I Google'd and could not find a working example.

I wish to do it in plain JavaScript.

Any help would be appreciated, thanks!

 

Jesse

 

Here is my current HTML5 image draw code:

I want a negative value for scaleX/scaleY to flip and scale the HTML5 image horizontally/vertically...

function DrawSpriteOntoCanvas(index, x, y, scaleX, scaleY, rotationDegree, alpha, red, green, blue){    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];    }            ctx.save();    ctx.globalAlpha = alpha;    if (rotationDegree !== 0)    {        ctx.translate(imageToDrawWidth * 0.5, imageToDrawHeight * 0.5);        ctx.rotate(DegToRad(rotationDegree));        ctx.translate(-imageToDrawWidth * 0.5, -imageToDrawHeight * 0.5);    }    var computedCenterX = Math.floor(imageToDrawWidth / 2);    var computedCenterY = Math.floor(imageToDrawHeight / 2);    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 < 0 || scaleY < 0)  ctx.scale(scaleX, scaleY);//    if (scaleX < 0)  scaleX = (scaleX * -1);//    if (scaleY < 0)  scaleY = (scaleY * -1);    ctx.drawImage(   imageToDraw, (  x - ( (computedCenterX) * scaleX )  ), (  y - ( (computedCenterY) * scaleY )  )    , (imageToDrawWidth * scaleX), (imageToDrawHeight * scaleY)   );    ctx.globalAlpha = 1;    ctx.restore();}

[GBeebe]

     context.save();

    context.translate(x, y);  //location on the canvas to draw your sprite, this is important.

    context.scale(-1, -1);  //This does your mirroring/flipping

    context.drawImage(spriteImage, sourceX, sourceY, spriteWidth, spriteHeight, 0, 0, spriteWidth, spriteHeight );  //destination x, y is set to 0, 0 (which will be at translated xy)

    context.restore();

[JeZxLee]

Hi,

 

Got it working!

Thanks!

 

Jesse