动态创建canvas元素为什么无效？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- <canvas id="myCanvas" width="500" height="500"></canvas> -->
    <script type="text/javascript">
        var canvas=document.createElement("canvas");
        canvas.style.height = '500px';
        canvas.style.width = '500px';
        //var c=document.getElementById("myCanvas");
        //var cxt=c.getContext("2d");
        var cxt = canvas.getContext("2d");
        cxt.fillStyle="#FF0000";
        /*
            x        矩形左上角的 x 坐标
            y        矩形左上角的 y 坐标
            width    矩形的宽度，以像素计
            height    矩形的高度，以像素计
        */
        cxt.fillRect(0,0,500,500);
    </script>
</body>

javascript