关于canvas绘图小程序问题：在微信开发者工具提供的模拟器上可以正常运行，但在PC端和手机端真机调试运行报错，哪位大牛帮忙看一下是什么原因，该如何解决

index.wxml关键点代码：

<canvas id="canvas_preview" type="2d" mode="aspectFit" background-size="cover" style="vertical-align:middle; width:600px; height:600px"></canvas>

index.js关键代码：（参考小程序开发文档示例代码）

wx.createSelectorQuery().select('#canvas_preview').fields({ id: true, node: true, size: true })
            .exec((res) => {
                      var canvas = res[0].node
                      var ctx = canvas.getContext('2d')
                                            ......
                              })

真机运行报错信息如下：

MiniProgramError

Cannot read property 'getContext' of null

TypeError: Cannot read property 'getContext' of null

    at Object.eval (weapp:///pages/index/index.js:239:38)

    at r.eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906677)

    at <SelectorQuery callback function>

    at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:114523)

    at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906803)

    at Array.forEach (<anonymous>)

    at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906791)

    at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:1906320)

    at eval (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:2673503)

    at A (eval at n.call.document (http://127.0.0.1:60808/remote-debug/runtime.js?devtools_ignore=true:1:14919), <anonymous>:2:2574511)