CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Lir An
Lir An

Reputation: 123

create canvas with js and align the element

I have this code below that helps me align the image to the center on any device/screen.

Now I need help with drawing the picture(myImage) as canvas and not $("body").append(img);

How can I do this?

<script>
        $(document).ready(function() {
            var img=new Image();
            img.src="myImage.jpg"
            img.onload=function() {
            //  console.log("image is loaded, yessss!")
                function my_resize() {
                    var w=img.width;
                    var h=img.height;
                    var ww=$(window).width();
                    var wh=$(window).height();
                    var ox=(ww-w)/2;
                    var oy=(wh-h)/2;
                    console.log("data is "
                        +w+","+
                        +h+","+
                        +ww+","+
                        +wh+","+
                        +ox+","+
                        +oy+","
                    );
                    $(img).offset({left:ox,top:oy,});
                }
                $("body").append(img);
                my_resize();
                $(window).resize(function() {
                    my_resize();
                    });
            }
        });
    </script>

Upvotes: 1

Views: 321

Answers (1)

Hayk Martiros
Hayk Martiros

Reputation: 2186

Try this jsfiddle:

http://jsfiddle.net/MqkRs/4/

Upvotes: 2

Related Questions