Search the Community

Greetings! I am a total newbie. For my first Pixi project I am trying to modify this awesome Codepen which integrates a photo with a dangling piece of interactive pixi-cloth: https://codepen.io/shshaw/pen/JbrQrW Instead of using the full screen, I want my photo to appear in a div, just like a regular photo. After much struggle I figured out how to append the canvas onto a div called "canvas-parent" instead of the body, and to force it to a fixed size of 350x500 instead of basing it on the screen size. I am using the codepen guy's code with the following changes: ```javascript var canvasContainer = document.getElementById('canvas-parent'); canvasContainer.appendChild(canvas); ... let renderer = PIXI.autoDetectRenderer(350, 500, {transparent: true }); ``` It took forever to figure out the CSS issues of absolute positioning, transparency, and z-index. Finally, I thought it was working great. But then I realized that my "cloth" was responding to mouse movements NOT at the new location inside my div, but at the old location -- starting at 0,0 relative to the body. As you can see, my mouse pointer is WAY over to the left side of the photo while the photo is reacting to it. For the life of me I can't figure out what I need to change to make my cloth respond to mouse events occurring INSIDE the region of my canvas/div. I have looked at the beginner materials on pixi site, but none of them show an example of the user interacting with a piece of cloth, and none of them show how to work inside of an HTML element. As you can see, I am tearing my hair out, so any pointer in the right direction would be greatly appreciated.