CODEWITHSUNDEEP
jqueryhtmlhtml5-canvas
StudioTime
StudioTime

Reputation: 23979

Flipping canvas not reversing

I am using the following code to flip a canvas, and it works perfectly, but if I call it again it does not flip the canvas back

$(document).on("click", "#verticalFlip", function() { // save

        var canvasH = document.getElementById("myCanvas");
        var ctxH = canvasH.getContext("2d");
        var img = new Image();
        img.onload = function () {
            // flip vertical
            canvasH.width = img.width;
            canvasH.height = img.height;
            ctxH.save();
            ctxH.scale(1, -1);
            ctxH.translate(0, -img.height);
            ctxH.drawImage(img, 0, 0);
            ctxH.restore();
        }
        img.src = "http://myurl.com/" + user_id + "_temp.jpg";
    });

How can I revert the canvas back to its original state?

Upvotes: 0

Views: 164

Answers (3)

gkalpak
gkalpak

Reputation: 48211

Each time, you are loading the original (unflipped) image and then draw it flipped on the canvas.

The easiest way to achieve what you want, is to have a variable representing the state of the canvas (flipped/unflipped) and then either draw the image "normaly" or "flipped", e.g.

var isFlipped = <true/false>;
function() flipAndDraw(...) {
    ...
    if (isFlipped) { /* Draw normaly */ }
    else { /* Draw flipped */ }
    isFlipped = !isFlipped;
    ...

See, also, this short demo.

Upvotes: 2

jing3142
jing3142

Reputation: 1871

Your code does the following steps each time you call it

(1) load an image (2) when loaded flip vertically

so each time you call it you load and then flip the original image.

You need to load the image with a separate function and once loaded set the function that will flip the image.

Upvotes: 0

wagerfield
wagerfield

Reputation: 920

You are repeating the exact same series of operations every time you click the #verticalFlip element:

  1. Selecting the canvas element
  2. Getting a reference to its context
  3. Creating a new image and adding an event listener to its load event
  4. Loading an image by setting its source
  5. Drawing an 'flipped' version of the image on the canvas when the image loads

Since you are loading and then flipping the image every time you click the document, there is never any tracked 'state' to determine the direction. There are a few issues with your approach, please allow me to provide a refactored solution:

// jQuery document ready function
$(function() {

    // Cache jQuery selections
    var $verticalFlip = $("#verticalFlip");

    // Cache canvas element and context
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    // Cache the image object
    var image = new Image();

    // Create loaded and flipped states for the image
    var imageFlipped = false;
    var imageLoaded = false;

    // Add event handlers
    $verticalFlip.on("click", onVerticalFlipClick);
    image.onload = onImageLoad;



    // Load image function
    function loadImage(src) {
        imageLoaded = false;
        image.src = src;
    };

    // Draw image function
    function drawImage(flip) {

        // Only draw the image on the canvas if it has loaded
        if (imageLoaded) {

            // Set the scale and translate the context based on the passed flip boolean
            context.save();
            context.scale(1, flip ? -1 : 1);
            context.translate(0, flip ? -image.height : 0);
            context.drawImage(image, 0, 0);
            context.restore();
        }
    };



    // Image load callback
    function onImageLoad(event) {
        imageLoaded = true;
        canvas.width = image.width;
        canvas.height = image.height;
        drawImage(imageFlipped);
    };

    // Click callback
    function onVerticalFlipClick(event) {

        // Invert the flip state
        imageFlipped = !imageFlipped;

        // Draw the image on the canvas
        drawImage(imageFlipped);
    };



    // Finally, load the image
    loadImage("http://myurl.com/" + user_id + "_temp.jpg");

});

Upvotes: 0

Related Questions