[SOLVED]To canvas or not to canvas.

[Relazy]

I wonder.. to canvas or not to canvas.

The question is rather simple. When should I use a canvas?

From what I can understand, canvases are mostly used for static items such as a background item such as a tree or equivalent to minimize the effort required for love to draw the image every frame therefore increasing performance. But what about things that move such as a parallax background? I assume that for example if I have stacked image objects (drawn in a canvas) on top of each other and I retrieve the canvas image data, only the visible shapes will have their data recorded.
So if I have a parallax background then I can simply draw all the parallax items on a single canvas and then save that as an image or simply draw the canvas?

Which is more efficient(pseudo code) and when is the appropriate cause to use the following:

figure [1]:

Code: Select all

function load()
local image = path.to.image
local image2 = path.to.image2
setCanvas(newCanvas)
      draw(image1) -- drawn almost on top of each other so the images overlap a little but not completely
      draw(image2)
setCanvas()
imageToDraw = newCanvas:getImageData()
end
function draw()
      draw(imageToDraw,variable_x,variable_y)
end

Or figure [2]:

Code: Select all

function load()
local image = path.to.image
local image2 = path.to.image2
setCanvas(newCanvas)
      draw(image1) -- drawn almost on top of each other so the images overlap a little but not completely  
      draw(image2)
setCanvas()
end
function draw()
      draw(newCanvas,variable_x,variable_y)
end

Notice that variable_x and variable_y are variables meaning that they will be changed during game play.

[micha]

For the first question: There is no reason to create imageData from a Canvas. Just draw the canvas directly.

If you have parallax background with multiple layers, then you need one canvas for each layer. This can still be beneficial, namely, if you have multiple images in each background layer. Then you can replace multiple drawing calls (for each image) by one single drawing call (for the canvas). This is often faster.

If you have multiple unrelated questions, I highly suggest posting them in separate threads. Otherwise people might miss the other questions.

[Relazy]

For the first question: There is no reason to create imageData from a Canvas. Just draw the canvas directly.

If you have parallax background with multiple layers, then you need one canvas for each layer. This can still be beneficial, namely, if you have multiple images in each background layer. Then you can replace multiple drawing calls (for each image) by one single drawing call (for the canvas). This is often faster.

If you have multiple unrelated questions, I highly suggest posting them in separate threads. Otherwise people might miss the other questions.

I get where you are coming from with unrelated questions. I attempted to focus on the subject of canvases in my questions therefore I assumed that this relation was enough to ask them in the same thread. I will address image editing in another thread instead.

Is it wrong to assume that canvases are essentially images? So drawing an image or a canvas of the same size will have the same performance.

[slime]

Is it wrong to assume that canvases are essentially images? So drawing an image or a canvas of the same size will have the same performance.

Yes that's correct – Images and Canvases use the same thing (OpenGL textures) under the hood.

[micha]

Using a canvas still can be beneficial, namely if you draw multiple things onto the canvas. Using a canvas then, reduces the number of drawing-calls to 1 instead of one for each object. That of course, only works, if the content of the canvas is constant over many cycles.

One use-case is, if you have a complicated background. You can generate it once, composed of many smaller images. Once you have created it, drawing it again is fast, because you only need to draw the canvas instead of all the small images.

[Relazy]

Thank you this has solved my misunderstanding.