JeZxLee

HTML5 Image Flip Horizontally/Vertically?

Recommended Posts

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();}

Share this post


Link to post
Share on other sites
     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();

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.