Jump to content

Need help getting mouse to follow my HTML canvas


Recommended Posts

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: 

var canvasContainer = document.getElementById('canvas-parent');
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.  



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...