Barry Watts Barry Watts - 2 years ago 166
CSS Question

how to flip a canvas from its current position

I am trying to add flip and rotate options to a canvas but after I rotate,if I flip, it flips from its page load position rather than its current rotated position.
heres my jquey code for flipping and rotating

var k = 0;
$('#flip_image_btn').click(function(){
var j = $('.dithered-image');
k += 180;
$('.dithered-image').css({
"transform":"rotatey(" + k + "deg)",
"transitionDuration":"0.5s"
});

});


var rotation = 0;
$("#rotate_image_clockwise_btn").click(function(){
rotation = rotation+18;
$('.dithered-image').css("transform", "rotate("+rotation+"deg)");
});
$("#rotate_image_anticlockwise_btn").click(function(){
rotation = rotation-18;
$('.dithered-image').css("transform", "rotate("+rotation+"deg)");
});


Is there a way to flip the image as it stands rather than kt returning to its loaded position and then flipping?

here a fiddle showing what is happening
https://jsfiddle.net/muugzans/1/

thanks in advance

Answer Source

you need to combine them, what you are doing is overriding a transformation by the other one, try this instead :

window.onload = function() {
  /*var c = document.getElementById("myCanvas");
  var ctx = c("2d");

  ctx.drawImage(img, 10, 10);*/
}
var k = 0;
var rotation = 0;
$('#flip_image_btn').click(function() {
  var j = $('.dithered-image');
  k += 180;
  $('.dithered-image').css({
    "transform": "rotate(" + rotation + "deg) rotatey(" + k + "deg)",
    "transitionDuration": "0.5s"
  });

});



$("#rotate_image_clockwise_btn").click(function() {
  rotation = rotation + 18;
  $('.dithered-image').css("transform", "rotate(" + rotation + "deg) rotatey(" + k + "deg)");
});
$("#rotate_image_anticlockwise_btn").click(function() {
  rotation = rotation - 18;
  $('.dithered-image').css("transform", "rotate(" + rotation + "deg) rotatey(" + k + "deg)");
});
.dithered-image {
  max-width: 550px;
  max-height: 350px;
  width: 100%;
  top: 130px;
  left: 150px;
}

.flipped {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

#myCanvas {
  width: 150px;
  height: auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<input type="button" class="button" value="Flip Image" id="flip_image_btn" />
<button style="font-size:24px" id="rotate_image_clockwise_btn">rotate</button>

<img class="dithered-image" id="myCanvas" src="https://cdn.pixabay.com/photo/2016/09/01/10/23/image-1635747_1280.jpg" width="100" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download