[SOLVED] Weird graphical bug with canvas

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
XHH
Citizen
Posts: 85
Joined: Thu Jun 20, 2013 6:43 pm
Location: US
Contact:

[SOLVED] Weird graphical bug with canvas

Post by XHH »

Hi, I'm trying to draw a grid using the canvas and graphics methods. For some reason it is sometimes showing a gradient in the background. This doesn't happen if I draw without using a canvas though. Am I using canvas incorrectly? (screenshot and code below)
Screenshot from 2021-08-18 09-26-18.png
Screenshot from 2021-08-18 09-26-18.png (14.03 KiB) Viewed 6112 times

Code: Select all

local canvas 
local snap = {x=32, y=32}

love.load = function()
  width, height = love.graphics.getWidth(), love.graphics.getHeight()
  canvas = love.graphics.newCanvas()

  canvas:renderTo(function()
    love.graphics.clear()
    love.graphics.setColor(224/255, 224/255, 224/255, 0.5)
    local linex, liney = 0, 0
    -- v lines
    for x = 0, width do 
      linex = x * snap.x 
      love.graphics.line(linex, 0, linex, height)
    end
    -- h lines
    for y = 0, width do 
      liney = y * snap.y 
      love.graphics.line(0, liney, width, liney)
    end
    -- origin
    love.graphics.setColor(224/255, 224/255, 224/255, 1)
    love.graphics.line(0,0,width,0)
    love.graphics.line(0,0,0,height)
  end)
end

love.draw = function()
  love.graphics.draw(canvas)
end
Specs:
Running love-11.3-x86_64.AppImage
-- on --
Pop!_OS 21.04 64 bit
AMD Ryzen 7 2700 8 core
Radeon RX 580
Last edited by XHH on Wed Aug 18, 2021 8:51 pm, edited 1 time in total.
I like to draw and program :)
User avatar
milon
Party member
Posts: 472
Joined: Thu Jan 18, 2018 9:14 pm

Re: Weird graphical bug with canvas

Post by milon »

I didn't check over your code, but it runs just fine for me (Linux Mint with the most recent nvidia driver). See screenshot.
I suspect you've got a driver issue.
EDIT - Note how the lines in my screenshot are additive - they're brighter where they cross. That's because you're drawing the lines with some transparency, so I believe my screenshot is correct in that matter too.
Attachments
Screenshot_2021-08-18_10-03-21.png
Screenshot_2021-08-18_10-03-21.png (6.19 KiB) Viewed 6102 times
Any code samples/ideas by me should be considered Public Domain (no attribution needed) license unless otherwise stated.
User avatar
BrotSagtMist
Party member
Posts: 636
Joined: Fri Aug 06, 2021 10:30 pm

Re: Weird graphical bug with canvas

Post by BrotSagtMist »

I can neither reproduce the gradient but i can confirm it renders different here too.

My guess is: youre not reverting the last color change in line 22. Youre effectively adding color tint to the canvas. That may be broken at your driver.
obey
User avatar
darkfrei
Party member
Posts: 1186
Joined: Sat Feb 08, 2020 11:09 pm

Re: Weird graphical bug with canvas

Post by darkfrei »

Always set the color to white before draw the canvas.

Also do

Code: Select all

    for x = 0, width/snap.x do -- don't render to out of canvas
      linex = x * snap.x 
      love.graphics.line(linex, 0, linex, height)
    end
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
XHH
Citizen
Posts: 85
Joined: Thu Jun 20, 2013 6:43 pm
Location: US
Contact:

[SOLVED] Re: Weird graphical bug with canvas

Post by XHH »

darkfrei wrote: Wed Aug 18, 2021 7:00 pm Always set the color to white before draw the canvas.

Also do

Code: Select all

    for x = 0, width/snap.x do -- don't render to out of canvas
      linex = x * snap.x 
      love.graphics.line(linex, 0, linex, height)
    end
It looks like rendering outside of the canvas was the issue! Also setting the color to white solved another issue. Thank you so much :D
I like to draw and program :)
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 13 guests