Making canvas mirror, scale and rotate

Question

I have facing a very trickier problem here. My primary objective is trying to make "exact" copy of an image with exact transformation applied in CSS3. What I did, you can see it here

At left I have a div containing image tag, and on right I am trying to make it's replica with canvas element. on top you have control options for original area at left. you can rotate it , or scale it by setting values in control area.

now try to scale it to 0.5 and rotate for 45 degrees. now you can see image is re-located and also cropped from all 4 sides, I want it to to be exact like left one. I tried few maths here but it feels to me that I over looked something very basic

for making copy I am using following script

function myCopy(){
            var cache = document.getElementById('mimg');
            var canvas = document.createElement('canvas');

            var cxt = canvas.getContext("2d");
            var ang = getRotationDegrees($("#mimg")) * Math.PI / 180;
            var scle = getScaleValue($("#mimg"));
            var p = $("#mimg").position(); 
            var c_w = cache.width*scle;
            var c_h = cache.height*scle;

            canvas.width = c_w;
            canvas.height = c_h;

            cxt.save();

            cxt.translate(c_w/2,c_h/2);
            cxt.rotate(ang);
            cxt.translate(-c_w/2,-c_h/2);
            cxt.drawImage(cache,0,0,c_w,c_h);
            var myData = cxt.getImageData(0, 0, c_w,c_h);                

            cxt.restore();

            var dcan = document.getElementById("myCanvas");

            var cxt1 = dcan.getContext('2d');

            cxt1.save();
            cxt1.fillStyle = "rgb(255,255,255)";
            cxt1.fillRect(0,0,cache.width, cache.height);

            cxt1.putImageData(myData,0,0,0,0,c_w,c_h);

            cxt1.restore();

            $("#holder").css("left",p.left);
            $("#holder").css("top",p.top);
        }

and here is my html structure of left area (original one)

<div id="divclip" style="position:relative;width: 600px; height:600px;overflow: hidden;border: solid 1px black">
        <div style="border: 1px solid red;display:inline-block">
            <img id="mimg" class="clip-svg" src="1.png" alt="Harry Potter">
        </div>

    </div>

and here is for right area (replica one created from myCopy function )

        <div style="position: absolute; left: 650px; top:35px;border:1px solid #d3d3d3;">
        <div id="holder" style="position:relative; left: 0px; top: 0px;border:1px solid red;">
            <canvas id="myCanvas" width="600" height="600" style="">
            </canvas>                
        </div>
    </div>

Any help would be much appreciated.

Thanks

George George · Accepted Answer · 2016-01-04T02:06:00

You're positioning the copied image by moving the holder div with css instead of positioning it using the putImageData parameters.

I suggest removing these:

$("#holder").css("left",p.left);
$("#holder").css("top",p.top);

and instead in your putImageData function use something like:

cxt1.putImageData(myData,p.left, p.top);

Since I can't test your code it won't be perfect. I suggest making a jsFiddle so it's easier for people to help with your code.

Making canvas mirror, scale and rotate

1 Answers