Difference between revisions of "Canvas"
m (→Drawing something to the Canvas and then the Canvas itself.) |
(Removed moot example) |
||
(19 intermediate revisions by 6 users not shown) | |||
Line 4: | Line 4: | ||
By drawing things that do not change position often (such as background items) to the Canvas, and then drawing the entire Canvas instead of each item, you can reduce the number of draw operations performed each frame. | By drawing things that do not change position often (such as background items) to the Canvas, and then drawing the entire Canvas instead of each item, you can reduce the number of draw operations performed each frame. | ||
− | + | In versions prior to [[0.10.0]], not all graphics cards that LÖVE supported could use Canvases. [[love.graphics.isSupported|love.graphics.isSupported("canvas")]] could be used to check for support at runtime. | |
− | {{notice| | + | |
+ | {{notice|When drawing content to a Canvas using regular alpha blending, the alpha values of the content get multiplied with its RGB values. | ||
+ | |||
+ | Therefore the Canvas' pixel colors will have ''premultiplied alpha'' once it has been drawn to, so when drawing the Canvas to the screen or to another Canvas you must use premultiplied alpha blending – [[love.graphics.setBlendMode]]("alpha", "premultiplied").}} | ||
== Constructors == | == Constructors == | ||
Line 19: | Line 22: | ||
| ?PrettySince | | ?PrettySince | ||
| ?PrettyRemoved | | ?PrettyRemoved | ||
+ | | ?PrettyDeprecated | ||
}} | }} | ||
== Functions == | == Functions == | ||
− | {{#ask: [[Category:Functions]] [[parent::Canvas||Drawable||Object]] [[Concept:Current]] | + | {{#ask: [[Category:Functions]] [[parent::Canvas||Texture||Drawable||Object]] [[Concept:Current]] |
| headers=hide | | headers=hide | ||
| format=template | | format=template | ||
Line 30: | Line 34: | ||
| ?PrettySince | | ?PrettySince | ||
| ?PrettyRemoved | | ?PrettyRemoved | ||
+ | | ?PrettyDeprecated | ||
+ | }} | ||
+ | == Enums == | ||
+ | {{#ask: [[Category:Enums]] [[parent::Canvas]] [[Concept:Current]] | ||
+ | | headers=hide | ||
+ | | format=template | ||
+ | | template=ListingFields | ||
+ | | introtemplate=ListingIntro | ||
+ | | outrotemplate=ListingOutro | ||
+ | | ?Description | ||
+ | | ?PrettySince | ||
+ | | ?PrettyRemoved | ||
+ | | ?PrettyDeprecated | ||
}} | }} | ||
== Supertypes == | == Supertypes == | ||
Line 36: | Line 53: | ||
* [[parent::Object]] | * [[parent::Object]] | ||
== Examples == | == Examples == | ||
− | === Drawing something to the Canvas and then draw the Canvas to the screen | + | === Drawing something to the Canvas and then draw the Canvas to the screen === |
<source lang="lua"> | <source lang="lua"> | ||
function love.load() | function love.load() | ||
− | + | canvas = love.graphics.newCanvas(800, 600) | |
− | + | -- Rectangle is drawn to the canvas with the regular/default alpha blend mode ("alphamultiply"). | |
− | + | love.graphics.setCanvas(canvas) | |
− | + | love.graphics.clear(0, 0, 0, 0) | |
− | + | love.graphics.setBlendMode("alpha") | |
− | + | love.graphics.setColor(1, 0, 0, .5) | |
− | + | love.graphics.rectangle("fill", 0,0, 100,100) | |
− | + | love.graphics.setCanvas() | |
end | end | ||
function love.draw() | function love.draw() | ||
− | + | -- The colors for the rectangle on the canvas have already been alpha blended. | |
− | + | -- Use the "premultiplied" alpha blend mode when drawing the canvas to the screen for proper color blending. | |
− | + | -- (Also set the color to white so the canvas itself doesn't get tinted.) | |
− | + | love.graphics.setBlendMode("alpha", "premultiplied") | |
− | + | love.graphics.setColor(1, 1, 1, 1) | |
− | + | love.graphics.draw(canvas, 0,0) | |
− | + | -- Observe the difference if the canvas is drawn with the regular alpha blend mode instead. | |
− | + | love.graphics.setBlendMode("alpha") | |
− | + | love.graphics.draw(canvas, 100,0) | |
− | + | -- Rectangle is drawn directly to the screen with the regular alpha blend mode. | |
− | + | love.graphics.setBlendMode("alpha") | |
− | + | love.graphics.setColor(1, 0, 0, .5) | |
− | + | love.graphics.rectangle("fill", 200,0, 100,100) | |
+ | |||
+ | -- (Helper texts.) | ||
+ | love.graphics.setColor(1, 1, 1, 1) | ||
+ | love.graphics.printf("canvas", 0,0, 100) | ||
+ | love.graphics.printf("incorrect\n(looks too dark)", 100,0, 100) | ||
+ | love.graphics.printf("rectangle\n(what canvas should look like)", 200,0, 100) | ||
end | end | ||
+ | </source> | ||
+ | |||
+ | === Save canvas as picture === | ||
+ | <source lang="lua"> | ||
+ | canvas:newImageData():encode("png","filename.png") | ||
</source> | </source> | ||
Line 71: | Line 99: | ||
* [[parent::love.graphics]] | * [[parent::love.graphics]] | ||
* [[love.graphics.setCanvas]] | * [[love.graphics.setCanvas]] | ||
+ | * [[love.graphics.setBlendMode]] | ||
* [[love.graphics.isSupported]] | * [[love.graphics.isSupported]] | ||
+ | * [[love.graphics.getDimensions]] | ||
+ | * [[love.graphics.draw]] | ||
+ | * [[ImageData:encode]] | ||
[[Category:Types]] | [[Category:Types]] | ||
{{#set:Description=Off-screen render target.}} | {{#set:Description=Off-screen render target.}} |
Latest revision as of 23:07, 8 March 2023
Available since LÖVE 0.8.0 |
It has been renamed from Framebuffer. |
A Canvas is used for off-screen rendering. Think of it as an invisible screen that you can draw to, but that will not be visible until you draw it to the actual visible screen. It is also known as "render to texture".
By drawing things that do not change position often (such as background items) to the Canvas, and then drawing the entire Canvas instead of each item, you can reduce the number of draw operations performed each frame.
In versions prior to 0.10.0, not all graphics cards that LÖVE supported could use Canvases. love.graphics.isSupported("canvas") could be used to check for support at runtime.
When drawing content to a Canvas using regular alpha blending, the alpha values of the content get multiplied with its RGB values.
Therefore the Canvas' pixel colors will have premultiplied alpha once it has been drawn to, so when drawing the Canvas to the screen or to another Canvas you must use premultiplied alpha blending – love.graphics.setBlendMode("alpha", "premultiplied"). |
Contents
Constructors
love.graphics.newCanvas | Creates a new Canvas. | 0.8.0 |
Functions
Canvas:clear | Clears the contents of a Canvas to a specific color. | 0.8.0 | 0.10.0 |
Canvas:generateMipmaps | Generates mipmaps for the Canvas, based on the contents of the highest-resolution mipmap level. | 11.0 | |
Canvas:getFSAA | Gets the number of FSAA samples used when drawing to the Canvas. | 0.9.1 | 0.10.0 |
Canvas:getFormat | Gets the texture format of the Canvas. | 0.9.1 | 11.0 |
Canvas:getImageData | Generates ImageData from the contents of the Canvas. | 0.8.0 | 0.10.0 |
Canvas:getMSAA | Gets the number of MSAA samples used when drawing to the Canvas. | 0.9.2 | |
Canvas:getMipmapMode | Gets the MipmapMode this Canvas was created with. | 11.0 | |
Canvas:getPixel | Gets the pixel at the specified position in a Canvas. | 0.9.0 | 0.10.0 |
Canvas:newImageData | Generates ImageData from the contents of the Canvas. | 0.10.0 | |
Canvas:renderTo | Render to a Canvas using a function. | 0.8.0 | |
Object:release | Immediately destroys the object's Lua reference. | 11.0 | |
Object:type | Gets the type of the object as a string. | ||
Object:typeOf | Checks whether an object is of a certain type. | ||
Texture:getDPIScale | Gets the DPI scale factor of the Texture. | 11.0 | |
Texture:getDepth | Gets the depth of a Volume Texture. | 11.0 | |
Texture:getDepthSampleMode | Gets the comparison mode used when sampling from a depth texture in a shader. | 11.0 | |
Texture:getDimensions | Gets the width and height of the Texture. | 0.9.0 | |
Texture:getFilter | Gets the filter mode of the Texture. | ||
Texture:getFormat | Gets the pixel format of the Texture. | 11.0 | |
Texture:getHeight | Gets the height of the Texture. | ||
Texture:getLayerCount | Gets the number of layers / slices in an Array Texture. | 11.0 | |
Texture:getMipmapCount | Gets the number of mipmaps contained in the Texture. | 11.0 | |
Texture:getMipmapFilter | Gets the mipmap filter mode for a Texture. | 0.9.0 | |
Texture:getPixelDimensions | Gets the width and height in pixels of the Texture. | 11.0 | |
Texture:getPixelHeight | Gets the height in pixels of the Texture. | 11.0 | |
Texture:getPixelWidth | Gets the width in pixels of the Texture. | 11.0 | |
Texture:getTextureType | Gets the type of the Texture. | 11.0 | |
Texture:getWidth | Gets the width of the Texture. | ||
Texture:getWrap | Gets the wrapping properties of a Texture. | ||
Texture:isReadable | Gets whether the Texture can be drawn and sent to a Shader. | 11.0 | |
Texture:setDepthSampleMode | Sets the comparison mode used when sampling from a depth texture in a shader. | 11.0 | |
Texture:setFilter | Sets the filter mode of the Texture. | ||
Texture:setMipmapFilter | Sets the mipmap filter mode for a Texture. | 0.9.0 | |
Texture:setWrap | Sets the wrapping properties of a Texture. |
Enums
MipmapMode | Controls whether a Canvas has mipmaps, and its behaviour when it does. | 11.0 |
Supertypes
Examples
Drawing something to the Canvas and then draw the Canvas to the screen
function love.load()
canvas = love.graphics.newCanvas(800, 600)
-- Rectangle is drawn to the canvas with the regular/default alpha blend mode ("alphamultiply").
love.graphics.setCanvas(canvas)
love.graphics.clear(0, 0, 0, 0)
love.graphics.setBlendMode("alpha")
love.graphics.setColor(1, 0, 0, .5)
love.graphics.rectangle("fill", 0,0, 100,100)
love.graphics.setCanvas()
end
function love.draw()
-- The colors for the rectangle on the canvas have already been alpha blended.
-- Use the "premultiplied" alpha blend mode when drawing the canvas to the screen for proper color blending.
-- (Also set the color to white so the canvas itself doesn't get tinted.)
love.graphics.setBlendMode("alpha", "premultiplied")
love.graphics.setColor(1, 1, 1, 1)
love.graphics.draw(canvas, 0,0)
-- Observe the difference if the canvas is drawn with the regular alpha blend mode instead.
love.graphics.setBlendMode("alpha")
love.graphics.draw(canvas, 100,0)
-- Rectangle is drawn directly to the screen with the regular alpha blend mode.
love.graphics.setBlendMode("alpha")
love.graphics.setColor(1, 0, 0, .5)
love.graphics.rectangle("fill", 200,0, 100,100)
-- (Helper texts.)
love.graphics.setColor(1, 1, 1, 1)
love.graphics.printf("canvas", 0,0, 100)
love.graphics.printf("incorrect\n(looks too dark)", 100,0, 100)
love.graphics.printf("rectangle\n(what canvas should look like)", 200,0, 100)
end
Save canvas as picture
canvas:newImageData():encode("png","filename.png")
See Also
- love.graphics
- love.graphics.setCanvas
- love.graphics.setBlendMode
- love.graphics.isSupported
- love.graphics.getDimensions
- love.graphics.draw
- ImageData:encode
Other Languages
Dansk –
Deutsch –
English –
Español –
Français –
Indonesia –
Italiano –
Lietuviškai –
Magyar –
Nederlands –
Polski –
Português –
Română –
Slovenský –
Suomi –
Svenska –
Türkçe –
Česky –
Ελληνικά –
Български –
Русский –
Српски –
Українська –
עברית –
ไทย –
日本語 –
正體中文 –
简体中文 –
Tiếng Việt –
한국어
More info