canvas flip flop example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Flip &amp; Flop Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #mycanvas {
            border: 1px solid #888;
        }
        #imgdrop {
            width: 500px;
            height: 200px;
            background: #FF0;
            border: 1px solid #888;
            text-align: center;
            line-height: 200px;
            font-size: 25px;
            font-weight: bold;
        }
        div {
            margin: 20px;
        }
    </style>
</head>
<body>
        <div>
            <button onclick="flip()" class="btn btn-default"><span class="glyphicon glyphicon-resize-horizontal"></span> flip</button>
            <button onclick="flop()" class="btn btn-default"><span class="glyphicon glyphicon-resize-vertical"></span> flop</button>
        </div>
        <div><canvas id="mycanvas" width="500" height="300"></canvas></div>
        <div id="imgdrop" ondrop="drop(event);" ondragover="dragover(event)" ondragleave="dragleave(event)">Drop Image Here</div>
    <script>
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");
        var width = canvas.width;
        var height = canvas.height;

        var img = new Image();

        function drop(event){
            event.preventDefault();
            var data = event.dataTransfer;
            var files = data.files;
            if( files.length > 0){
                if( files[0].type == "image/jpeg" || files[i].type == "image/png" || files[0].type == "image/gif" ) {
                    addPhoto(files[0]);
                }
            }
        }

        function dragover(event){
            event.preventDefault();
        }

        function dragleave(event){
            event.preventDefault();
        }

    function addPhoto(file){
        var reader = new FileReader();
        reader.addEventListener("load",function(){
            img.src = reader.result;
            ctx.drawImage(img, 0, 0, width, height);
        });
        reader.readAsDataURL(file);
    }

    function flip() {
                var scaleH = -1;
                var scaleV = 1;
                var posX = width * -1;
                var posY = 0;
                ctx.save(); //현재 상태 저장
                ctx.scale(scaleH, scaleV); // 뒤집을 크기
                ctx.drawImage(img, posX, posY, width, height); // 이미지 그리기
                ctx.restore(); // 마지막 저장 상태 저장
                img.src = canvas.toDataURL(); // img의 src에 canvas에 그려진 이미지 집어 넣기
    };

    function flop(){
                var scaleH = 1;
                var scaleV = -1;
                var posX =0;
                var posY = height * -1;
                ctx.save(); //현재 상태 저장
                ctx.scale(scaleH, scaleV); // 뒤집을 크기
                ctx.drawImage(img, posX, posY, width, height); // 이미지 그리기
                ctx.restore(); // img의 src에 canvas에 그려진 이미지 집어 넣기
                img.src = canvas.toDataURL();
    }
    </script>

</body>
</html>