Load a photo in a canvas, then flip

May 3rd, 2008. Tagged: canvas, images, JavaScript

zlati-nathalie.jpg

Today our family went to the yearly photo session with the girls. We took one shot that can be looked normally, as well as upside down, so I was wondering can you flip an image using a canvas tag. Turns out, yes, you can and it's pretty easy.

» Demo is here.

How to load an image in a canvas tag?

Start unpretentiously with an empty canvas tag:

<canvas id="canvas"></canvas>

Now the javascript. Two variables to store a handle to the canvas element and the 2D context of the canvas:

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

Now let's load an image into the canvas. Using the new Image() constructor you can create an image object, then set its src property to point to the location of the image file. Then set an onload handler for the image which is an anonymous function to be called when the image is done loading. There you put the image inside the canvas using the drawImage() method of the canvas context.

var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'zlati-nathalie.jpg';

You can also notice how the dimensions of the canvas are adjusted to match the dimensions of the image.

How to flip the image upside down

The canvas context provides a rotate() method. The rotation always happens around the top left corner of the image, so we first translate() the image to the bottom right. This way when the image is rotated, it fits back into the canvas. (There is also a one pixel correction, I have no idea why, just saw that the image wasn't flipping exactly otherwise). Assigning this functionality to the onclick:

can.onclick = function() {
    ctx.translate(img.width-1, img.height-1);
    ctx.rotate(Math.PI);
    ctx.drawImage(img, 0, 0, img.width, img.height);
};

C'est tout! Once again, the demo is here.

Tell your friends about this post: Facebook, Twitter, Google+

27 Responses

  1. Clean, lightweight, but I don’t think it’s the good approch.

    By wrapping the image inside a element, you lose all the browser UI for the image. You can drag & drop it, you can’t open it in another tab, etc. Also, from a semantic point of view, it’s an obscur method : search engines won’t be very glad to find a tag.

    I think image manipulations belongs to CSS, and we may see them very soon with the implementation of CSS 3 recommendations in Webkit and Firefox.

  2. thanks for posting this rotation method, the pixel correction is throwing me off too- but glad someone more technical than myself can share this, thanks again.

    Stephen.

  3. can.onclick = function() {
    ctx.translate(img.width/2, img.height/2);
    ctx.rotate(Math.PI);
    ctx.drawImage(img, -img.width/2, -img.height/2, img.width, img.height);
    }
    this works without a problem
    translate to center of image,rotate, then draw the image offset by how far you translated

    but the easiest way is this
    flip image down flip it back to the left by scaling -1 -1
    now move negative amounts to make up for the scaling
    can.onclick = function() {
    ctx.scale(-1,-1)
    ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
    }
    try it out

  4. Hey, it bugged me that the code didn’t work each click so I fixed it.

    Flipping photo in a canvas tag

    #canvas {cursor: pointer;}

    Example of using <canvas>

    This example shows how a photo is loaded in a <canvas> tag
    and then flipped.

    Click on the photo to flip (provided, of course, that your browser supports <canvas>)

    var can = document.getElementById(‘canvas’);
    var ctx = can.getContext(’2d’);
    var drawflip=0
    var img = new Image();
    img.src = ‘http://www.phpied.com/wp-content/uploads/2008/05/zlati-nathalie.jpg’;

    can.onclick = function() {
    can.width = img.width;
    can.height = img.height;

    if (drawflip % 2>0){
    ctx.scale(-1,-1)
    ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
    }

    if (drawflip % 2<=0){
    ctx.scale(1,1)
    ctx.drawImage(img, 0, 0, img.width, img.height);
    }

    drawflip+=1

    }; /*___end can.onclick____*/

    Blog post is here

  5. is this possible with video?

  6. Haven’t tried Jacob, but I wouldn’t be surprised.

  7. Hi there, nice to see some experimenting with . Just a note: this isn’t an actually flip, this is just rotating the image 180 degrees. Flipping it would require you to get into the imageData.

  8. Hlo Peter.
    Actually you can flip it without diving into imageData with the Stirfrys way.

    var can = (..),
    ctx = can.getContext(’2d’),
    img = new Image();
    img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
    }
    img.src = ‘http://11.media.tumblr.com/tumblr_kr2kxz9bYR1qzklvoo1_500.jpg’;
    can.onclick = function() {
    ctx.scale(-1,1); // to flip vertically, ctx.scale(1,-1);
    ctx.drawImage(can, -img.width, 0, img.width, img.height);
    }

  9. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  10. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  11. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  12. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  13. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  14. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  15. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  16. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  17. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  18. [...] Web Browsers” (“The Canvas”), Tali Garsiel, HTML5 Rocks Tutorials HTML5 Canvas Tutorials “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com “How to Draw With HTML5 Canvas,” Jamie Newman, Think Vitamin [...]

  19. For images with transparent backgrounds such as PNGs, the canvas must be cleared out before translating to avoid undesired overlaps.

    ctx.clearRect(0, 0, img.width, img.height);

  20. [...] “Load a Photo in a Canvas, Then Flip,” Stoyan Stefanov, phpied.com [...]

  21. instant facelift…

    [...]Load a photo in a canvas, then flip / Stoyan’s phpied.com[...]…

  22. [...] the canvas stuff I started by copying an old post to load an image into a canvas. This constructor was [...]

  23. Thank you very much i am new at html5 canvas,so this article is very helpful,can you help me regarding zoom In,Out,Rotate,pan image inside canvas element

  24. I’m extremely inspired with your writing abilities and also with the structure on your blog. Is this a paid topic or did you customize it your self? Anyway stay up the nice quality writing, it’s uncommon to peer a nice blog like this one today..

  25. is possible in automatic loop? for exemple in 5 seconds change image ;)

  26. Good post! We will be linking to this great content on
    our website. Keep up the good writing.

  27. Hi, Try this jquery plugin.
    Demo:
    http://dmadan.in/imageflip.html
    Source:
    https://github.com/dmadan86/imageflip

Leave a Reply