canvas black & white only?

[dusoft]

I am trying to use canvas for caching hundreds of individual drawing operations that would otherwise have to run every love.draw loop.

Unfortunately, I have a problem. Whatever color I set when drawing to canvas, this is not kept when drawing cached canvas from the main loop.

I can individually set canvas drawing color in the loop, e.g. when color is set to red in love.draw, drawing canvas is red.

I am using 'alpha', 'premultiplied' as recommended.

Is canvas two colors only (black and white) or can you draw to canvas multiple colors?

code example:

Code: Select all

mapvars.finalstate=love.graphics.newCanvas(mapvars.width, mapvars.height)
      love.graphics.setCanvas(mapvars.finalstate)
            love.graphics.setColor(color) -- different colors based on structure type (red, blue, gray etc.)
                  love.graphics.line(mapvars.offset.x+structures[i].coords[o].x, mapvars.offset.y+structures[i].coords[o].y, mapvars.offset.x+structures[i].coords[o+1].x, mapvars.offset.y+structures[i].coords[o+1].y)
      -- store ImageData object for later use
      love.graphics.setCanvas()

code example, main loop:

Code: Select all

love.graphics.setBlendMode('alpha', 'premultiplied')
      love.graphics.draw(mapvars.finalstate)
      -- everything is white background, [b]black lines only[/b]
      

[s-ol]

per default canvas' store RGBA values just like your normal framebuffer/window.

you should remember to set your color to white before drawing the canvas to the screen in your main loop. If that is not the cause of your problem, I think we will need more code to help you out.

[dusoft]

OK, thanks for the answer. The culprit is the layering - when I am drawing multiple pixels over each other, the last drawn (color) takes precedence, so I'll have to layer into multiple canvas and then draw ascending by priority.

Does layering work fine when putting multiple canvas over each other?

[MrFariator]

You can layer canvases fine; I typically use one for HUD/UI and another for the rest. Just draw the one you want to go to the bottom first, and then in ascending order.

[s-ol]

OK, thanks for the answer. The culprit is the layering - when I am drawing multiple pixels over each other, the last drawn (color) takes precedence, so I'll have to layer into multiple canvas and then draw ascending by priority.

Does layering work fine when putting multiple canvas over each other?

How is this not as expected? Layering behaves the same way as without a canvas.
If you want to mix the color of the pixel that was under the one that you are drawing you need to change the BlendMode or alpha. A 255-alpha pixel on the default 'alpha' blendmode is going to completely replace the one below of course.

[dusoft]

How is this not as expected? Layering behaves the same way as without a canvas.
If you want to mix the color of the pixel that was under the one that you are drawing you need to change the BlendMode or alpha. A 255-alpha pixel on the default 'alpha' blendmode is going to completely replace the one below of course.

This is indeed as expected, however in my complicated loop structure it was difficult to spot, specifically since calling the simple love.graphics.line used colors properly (I guess by drawing over and over in love.draw the colors were shown properly). After switching to canvas (where drawing happened only once, the last color only is shown)

[dusoft]

Actually, taking my statement back, I seem to have identified a bug:
try this code v1:

Code: Select all

rules = {
   highway = {
      motorway = {255, 0, 0}
   }
}
map.finalstate=love.graphics.newCanvas(800, 600)
love.graphics.setCanvas(map.finalstate)
love.graphics.setColor(map.rules.highway['motorway'])
love.graphics.line(1,1,200,200)
love.graphics.setCanvas()
love.graphics.setBlendMode('alpha', 'premultiplied')
love.graphics.draw(map.finalstate)

(gets grey line on white bg) -> incorrect

vs this v2:

Code: Select all

rules = {
   highway = {
      motorway = {255, 0, 0}
   }
}
map.finalstate=love.graphics.newCanvas(800, 600)
love.graphics.setCanvas(map.finalstate)
love.graphics.setColor(map.rules.highway['motorway'])
love.graphics.line(1,1,200,200)
love.graphics.setColor(255, 255, 255) --makes big change
love.graphics.setCanvas()
love.graphics.setBlendMode('alpha', 'premultiplied')
love.graphics.draw(map.finalstate)

(gets red line on white bg) -> correct

Seems to be a bug in implementation of draw function when using canvas.

[zorg]

Tinting (coloring) the canvas if you forget to clear the drawing color back to white is not a bug.
(the red line drawn premultiplied and tinted red coming out as a grey line may be, though i haven't done the math on that)

[dusoft]

Tinting (coloring) the canvas if you forget to clear the drawing color back to white is not a bug.
(the red line drawn premultiplied and tinted red coming out as a grey line may be, though i haven't done the math on that)

Well, if this is correct behaviour, then I apparently don't seem to get the whole canvas coloring concept. You have written that it behaves like standard drawing on screen, but based on this example, it just clearly does not. I would also expect the same behaviour as otherwise the whole UX (in this case programmer's usage experience) is just mess.

Anyway, problem is the Love2D documentation on canvas is hardly user friendly and is rather confusing. E.g. the modes alpha, add, multiply etc. should be demonstrated also visually, not just in text.

[s-ol]

Tinting (coloring) the canvas if you forget to clear the drawing color back to white is not a bug.
(the red line drawn premultiplied and tinted red coming out as a grey line may be, though i haven't done the math on that)

Well, if this is correct behaviour, then I apparently don't seem to get the whole canvas coloring concept. You have written that it behaves like standard drawing on screen, but based on this example, it just clearly does not. I would also expect the same behaviour as otherwise the whole UX (in this case programmer's usage experience) is just mess.

Anyway, problem is the Love2D documentation on canvas is hardly user friendly and is rather confusing. E.g. the modes alpha, add, multiply etc. should be demonstrated also visually, not just in text.

I guess you mean the BlendModes documentation, since BlendModes have almost nothing to do with canvas'!

The problem is that it's quite hard to demonstrate the different blend modes, since each of them has 8 input parameters per pixel.
Just overlapping a red and a blue triangle for example won't demonstrate half of the blendmodes properly, and if you have a different scene in each I think it will lose the clarity. But if you can think of a way to demonstrate it, go ahead and put that up!