Scaling on Android with a canvas

[DOMINOSRULZ]

Over the week, I've tried doing some tests with Love2D to try and have the screen scale correctly to any Android phone by drawing to the canvas and scailing.

Here is what I have come up with:

Code: Select all

function love.load()
  
  love.window.setMode(0,0,{fullscreen = false,resizable = false})
  width,height = love.graphics.getDimensions()
  
  
  if (width/height == 20/9) then
    TILE_SIZE = 60
    windowW = 1200
    windowH = 540
  else
    TILE_SIZE = 30
    windowW = 960
    windowH = 540
  end
  
  canvasW = windowW
  canvasH = windowH
  love.window.setMode(canvasW,canvasH,{fullscreen = false})
  gameCanvas = love.graphics.newCanvas(canvasW,canvasH)
  
  if love.system.getOS() == "Android" then
    scaleX = (width/canvasW)
    scaleY = (height/canvasH)
  else
    scaleX = 1
    scaleY = scaleX
  end

  canvasX = 0
  canvasY = 0
  
  yPos = 0
  --love.graphics.setDefaultFilter("nearest","nearest")
  
  paddle_1 = {}
  --paddle_1.x = canvasW/2 - paddle_1.width/2
  paddle_2 = {}
  paddle_3 = {}
  paddle_4 = {}
  
  x_counter = 0
  y_counter = 0
  y1_counter = 0
  x1_counter = 0
  
end


function love.update(dt)
  gameCanvas:renderTo(function()
    love.graphics.setColor(1,1,1,1)
    love.graphics.setColor(0,1,0,1)
    for x=canvasX,canvasW,TILE_SIZE do
      if (x_counter > canvasW/TILE_SIZE) then
        break
      end
      love.graphics.rectangle("line",x,canvasY,TILE_SIZE,TILE_SIZE)
      x_counter = x_counter + 1
      
    end
    
    for y=canvasY + TILE_SIZE,canvasH,TILE_SIZE do
      if (y_counter > canvasH/TILE_SIZE) then
        break
      end
      love.graphics.rectangle("line",canvasX,y,TILE_SIZE,TILE_SIZE)
      y_counter = y_counter + 1
      
      
    end
    
    for yPos=canvasY + TILE_SIZE,canvasH,TILE_SIZE do
      local pos = y1
      if (y1_counter > canvasH/TILE_SIZE) then
        break
      end
      love.graphics.rectangle("line",canvasW - TILE_SIZE,yPos,TILE_SIZE,TILE_SIZE)
      
      y1_counter = y1_counter + 1
    end
    
    for x1=canvasX+TILE_SIZE,canvasW,TILE_SIZE do
      if (x1_counter >= canvasW/TILE_SIZE) then
        break
      end
      love.graphics.rectangle("line",x1,canvasH - TILE_SIZE,TILE_SIZE,TILE_SIZE)
      x1_counter = x1_counter + 1
    end
  end)
end


function love.draw()
  love.graphics.draw(gameCanvas,canvasX * scaleX, canvasY * scaleY,0,scaleX,scaleY)
end

What I am trying to is call two versions of love.window.setMode() in love.load(). The first one is the record the device (computer or phone) screen width and height, and then we check whether the width/height is equal to 16/9, or 20/9. Depending on which is the option, the variables TILE_SIZE, windowW, and windowH differ. After this, we set the canvas width, and canvas height using the window width, and window height. We do a second set mode, this time with canvas width, and canvas height, and fullscreen being true. After this, we do a love.system.getOS() check, where the scaleX and scaleY change depending on the platform.

The issue is that it works, and sometimes doesn't work. It typically does work as intended on computers, but on mobile phones, it's a completely different issue.

Is there any idea on how this can be fixed?