在画布中的页面上定义JavaScript的位置

Question

我有一个pixi.js JavaScript，我想将它放在wordpress页面上的特定位置。现在，尽管我定义了它应该放置在画布中，但它仍显示在页面底部。

（它似乎在此处正确显示，但在我的wordpress网站上却不正确）

[请让我知道我哪里出错了。

       
        
        let app = new PIXI.Application({width:683, height:455, antialias:true, view:myCanvas});
        document.body.appendChild(app.view);
           
        let img = new PIXI.Sprite.from("https://devlucidpix.wpengine.com/wp-content/uploads/2019/12/4-illumination-tree-lights-morton-arboretum.jpg");
        img.width = 683;
        img.height =455;
        app.stage.addChild(img);    
            
        depthMap = new PIXI.Sprite.from("https://devlucidpix.wpengine.com/wp-content/uploads/2019/12/4-illumination-tree-lights-morton-arboretum_depth.jpg");
        depthMap.width = 683;
        depthMap.height = 455;
        app.stage.addChild(depthMap);
        displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
        app.stage.filters = [displacementFilter];
        
        window.onmousemove = function(e) {
        displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
        displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
        };
            
       

<script src="https://pixijs.download/release/pixi.min.js"></script>
        Some pre-image text goes here <br /><br />        
        
        <canvas id="myCanvas" width="683" height="455" style="border:8px solid #076e21; width:683; height:455;">
        <img src="https://devlucidpix.wpengine.com/wp-content/uploads/2019/12/4-illumination-tree-lights-morton-arboretum.jpg" width="683" height="455" alt=""/>
        </canvas>
        
         <br /><br />
        And here's some text after it. 
        

Answer 1

https://pixijs.download/dev/docs/PIXI.Application.html

view    HTMLCanvasElement       optional    
The canvas to use as a view, optional.

您的代码中有：

let app = new PIXI.Application({width:683, height:455, antialias:true, view:myCanvas});

所以问题是：这里的变量myCanvas是什么？在哪里以及如何初始化它？如您在文档中看到的，它应该是HTMLCanvasElement