Html 使用js创建画布并对齐元素

下面的代码帮助我将图像与任何设备/屏幕上的中心对齐

现在我需要帮助将

图片（myImage）

绘制为画布，而不是

$（“body”）。append（img）

我该怎么做

<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>


$（文档）.ready（函数（）{
var img=新图像（）；
img.src=“myImage.jpg”
img.onload=函数（）{
//log（“图像已加载，yesss！”）
函数my_resize（）{
var w=img.宽度；
var h=img.高度；
var ww=$（window.width（）；
var wh=$（window.height（）；
var ox=（ww-w）/2；
var oy=（wh-h）/2；
日志（“数据是”
+w+“，”+
+h+“，”+
+ww+“，”+
+wh+“，”+
+ox+“，”+
+oy+“，”
);
$（img）.offset（{left:ox，top:oy，}）；
}
$（“正文”）。附加（img）；
我的_resize（）；
$（窗口）。调整大小（函数（）{
我的_resize（）；
});
}
});
试试这个JSFIDLE：

谢谢！它工作得很好，有一个问题：我应该忽略js中的“canvas.wid”吗？那是打字错误吗？哈哈，当然。我在帖子中更新了JSFIDLE-感谢您的关注。谢谢，它在我的桌面上运行良好，但我需要此代码的原因是用于移动设备，在移动设备上，一旦我在纵向和横向之间切换，图像就不会停留在中心，也许您有解决方案？谢谢。@LirAn你能接受这个问题的答案，并就手机问题单独问一个问题吗？