Mouse coordinates are wrong when requestFullScreen called

[misch27]

The canvas coordinates in requestFullScreen are the same as the canvas before full screen mode, although they need to be adjusted.

Found a similar problem here https://stackoverflow.com/questions/43853119/javascript-wrong-mouse-position-when-drawing-on-canvas/43873988

[luttje]

For future reference:

I fixed this problem by calling requestFullScreen on a new div I wrapped around the game canvas.

Step-by-step

1. Open index.html of your built game
2. Find the canvas

   love.js/src/release/index.html

   Line 17 in c4f04e1

   <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>

3. Wrap a new div around it and give it the id 'game':

   <div id="game">
       <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
   </div>

4. Modify the goFullScreen function: https://github.com/Davidobot/love.js/blob/c4f04e185033a7c9fbefa9be3bec88c41a90421b/src/release/index.html#L22-23 to:

   function goFullScreen() {
       var canvas = document.getElementById("game");

5. The above will work, but it won't make the canvas full-size. To do that you can add a new class for #canvas in the <style> tag at the top:

   #canvas {
       max-height: 100%;
       max-width: 100%;
   }

A downside of this is that the canvas wont scale, thus your game wont know that the window changed size. It'll just remain the aspect ratio it was at boot. See this answer for a solution that doesn't have that problem: #88 (comment) (in combination with full-screen mode: love.window.setMode(600, 920, { fullscreen = true }))

[muu2007]

Webでfullscreenにしたときにcoordinateが狂う問題への対処

1. check fullscreen (love.update)

....
	if not love.window.fullscreen_offset_x and not love.window.fullscreen_offset_y and love.window.getFullscreen() and 'Web' == love.system.getOS() then
		local sw, sh = love.window.getDesktopDimensions()
		local w, h = love.graphics.getDimensions()
		if w/sw < h/sh then love.window.fullscreen_offset_x = true
		else                love.window.fullscreen_offset_y = true
	elseif not love.window.getFullscreen()
		love.window.fullscreen_offset_x, love.window.fullscreen_offset_y = nil, nil

2. adjust mouse position

function maid64.mouse.getPosition()
    local mx = math.floor((love.mouse.getX() - maid64.x) /
        (maid64.scaler * maid64.sizeY) * maid64.sizeY)
    local my = math.floor((love.mouse.getY() - maid64.y) /
        (maid64.scaler * maid64.sizeX) * maid64.sizeX)
	local sw, sh = love.window.getDesktopDimensions()
	local w, h = love.graphics.getDimensions()
	if love.window.fullscreen_offset_x then sw = sw * h / sh; mx = mx * sw/w - (sw - w) / 2 end
	if love.window.fullscreen_offset_y then sh = sh * w / sw; my = my * sh/h - (sh - h) / 2 end
    return mx, my
end