Load a photo in a canvas, then flip

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.

This entry was posted on Saturday, May 3rd, 2008 and is filed under canvas, images, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


Get notification for future posts: follow me on Twitter or subscribe to my RSS feed

26 Responses to “Load a photo in a canvas, then flip”

  1. Louis Says:

    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. photo canvas guy Says:

    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. Stirfry Says:

    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. Stirfry Says:

    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. Jacob Says:

    is this possible with video?

  6. Stoyan Says:

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

  7. Peter Says:

    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. Antaranian Says:

    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. Behind The Scenes Of Tourism New Zealand (Case Study) Says:

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

  10. Behind The Scenes Of Tourism New Zealand (Case Study) | all tech designs - Reference Guide... Says:

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

  11. Behind The Scenes Of Tourism New Zealand (Case Study) | Indian Hot News Says:

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

  12. Behind The Scenes Of Tourism New Zealand (Case Study) | DigitalMofo Says:

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

  13. Behind The Scenes Of Tourism New Zealand (Case Study) | Top website Designing Company in India Says:

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

  14. Behind The Scenes Of Tourism New Zealand (Case Study) | Design Web Development Joomla Magento Wordpress Prestashop blog posts Says:

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

  15. Behind The Scenes Of Tourism New Zealand (Case Study) | Ruturaj Pradeep Kohok | Your Web Advisor Says:

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

  16. Behind The Scenes Of Tourism New Zealand (Case Study) | VisionOn Technologies Says:

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

  17. Behind The Scenes Of Tourism New Zealand (Case Study) » Ezee2Know Says:

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

  18. Behind The Scenes Of Tourism New Zealand (Case Study) | Social Media Somerset Says:

    [...] 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. Marcel Duran Says:

    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. Behind The Scenes Of Tourism New Zealand (Case Study) | Smashing Magazine Says:

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

  21. instant facelift Says:

    instant facelift…

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

  22. Pixel manipulation in canvas | Web Help 101 Says:

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

  23. Mahendra Says:

    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. Pinterest images Says:

    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. Angelo Says:

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

  26. http://maloneyhkx.jigsy.com/ Says:

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

Leave a Reply