Below is a sollution for flipping an image on the <canvas> tag without having to read it pixel by pixel:
var mycanvas = document.getElementById('canvas');
ctx = mycanvas.getContext(’2d’),
img = new Image();
img.onload = function(){
mycanvas.width = img.width;
mycanvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = ‘http://farm3.static.flickr.com/2043/2653938087_bed6c6307d_m.jpg’;
mycanvas.onclick = function() {
ctx.scale(-1,1); // to flip vertically, ctx.scale(1,-1);
ctx.drawImage(can, -img.width, 0, img.width, img.height);
}
37 Comments.