Displaying HTML game in a div at actual size?

How do I...?
2

Hi

I have the same problem
I’ve found some things to change, so I have my game in my div.

But I’ve always a BIG BIG problem ! Mouse X and Y are not taken for div corner, but from page !
So, something is wrong… but what ??

I modify file pixi-renderes/runtimegame-pixi-renderer.js
this._isFullPage =false; //so game has the right size
this._pixiRenderer.view.style['position'] = 'relative'; //instead of absolute (to put the game inside the div)
this._pixiRenderer.view.style['top'] =0;// replace bad this._marginTop + (maxHeight - canvasHeight) / 2 + 'px';
this._pixiRenderer.view.style['left'] = 0;// replace bad this._marginLeft + (maxWidth - canvasWidth) / 2 + 'px';

I also modify the function to call the game (function in index.html file, after export)
new function is :
<div id="canvasArea2">my Div, where I want my game</div>
<script>
(function() {
//Initialization
var game = new gdjs.RuntimeGame(gdjs.projectData, {});

    //Create a renderer
    var myCanvas = document.getElementById("canvasArea2");
    game.getRenderer().createStandardCanvas(myCanvas);

    //Bind keyboards/mouse/touch events
    game.getRenderer().bindStandardEvents(game.getInputManager(), myCanvas, document);//, window, document

    //Load all assets and start the game
    game.loadAllAssets(function() {
        game.startGameLoop();
    });
})();
</script>

But, If you test with Mouse coordonates, it’s a big bug…

Example here :
http://adminvps4.fr.nf/test4-forum-gdevelop/