[SOLVED]Drawing a polygon to a canvas

nice · Post by **nice** » Thu Jan 08, 2015 2:11 pm

Hello boys and girls!

I'm currently on a small side project to understand canvas better and right now I have rectangles and circles drawn to the screen, I also want to add triangles to the screen too but since 0.9.0 you can't use graphics.triangle so I'm using graphics.polygon instead.

But as of now they don't show up on my screen, I'm pretty sure that I have the coordinates nailed down and I also have a size of my "triangle" that I'm satisfied with so I would appreciate if you could give me some hints on what I'm doing wrong.

Thank you for your time!

Code: Select all

local	rectangleCanvas = love.graphics.newCanvas(100, 100) -- Rectangle Canvas
local	circleCanvas = love.graphics.newCanvas(100, 100) -- Circle Canvas
local   polygonCanvas = love.graphics.newCanvas(100, 100) -- Polygon Canvas 	


function love.load()

-- Rectangle

	love.graphics.setCanvas(rectangleCanvas)
		rectangleCanvas:clear()
		love.graphics.setColor(0, 255, 0, 128)
		love.graphics.rectangle('fill', 0, 0, 100, 100)
	love.graphics.setCanvas()

-- Circle

	love.graphics.setCanvas(circleCanvas)
		circleCanvas:clear()
		love.graphics.setColor(255, 0, 0, 128)
		love.graphics.circle('fill', 50, 50, 50, 50)
	love.graphics.setCanvas()

-- Polygon

	love.graphics.setCanvas(polygonCanvas)
		polygonCanvas:clear()
		love.graphics.setColor(0, 0, 255, 128)
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
	love.graphics.setCanvas()	
--[[
love.graphics.draw(rectangleCanvas) -- Rectangle
love.graphics.draw(circleCanvas, 100, 100) -- Circle


love.graphics.draw(rectangleCanvas, 100, 0)
love.graphics.draw(circleCanvas,0, 100) -- Bright Red
]]--
end



function love.draw()

love.graphics.setColor(255, 255, 255, 255)

--[[
-- Rectangle

	love.graphics.setCanvas(rectangleCanvas)
		rectangleCanvas:clear()
		love.graphics.setColor(0, 255, 0, 128)
		love.graphics.rectangle('fill', 0, 0, 100, 100)
	love.graphics.setCanvas()

-- Circle

	love.graphics.setCanvas(circleCanvas)
		circleCanvas:clear()
		love.graphics.setColor(255, 0, 0, 128)
		love.graphics.circle('fill', 50, 50, 50, 50)
	love.graphics.setCanvas()

-- Polygon
	love.graphics.setCanvas(polygonCanvas)
		polygonCanvas:clear()
		love.graphics.setColor(0, 0, 255, 128)
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
	love.graphics.setCanvas()
]]--

-- Canvas (Drawn To The Left)
love.graphics.draw(rectangleCanvas) -- Rectangle
love.graphics.draw(circleCanvas, 0, 100) -- Circle
love.graphics.draw(polygonCanvas, 0, 200) -- Polygon

-- Canvas (Drawn In The Middle)
love.graphics.draw(rectangleCanvas, 100, 0) -- Rectangle
love.graphics.draw(circleCanvas, 100, 100) -- Circle
love.graphics.draw(polygonCanvas, 100, 200) -- Polygon

-- Normal (Drawn To The Right)

-- Rectangle
love.graphics.setColor(0, 255, 0, 128)
love.graphics.rectangle('fill', 200, 0, 100, 100)

-- Circle
love.graphics.setColor(255, 0, 0, 128)
love.graphics.circle('fill', 250, 150, 50, 50)

--[[
-- Polygon
love.graphics.setColor(0, 0, 255, 128)
love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
]]--
end

Muris · Post by **Muris** » Thu Jan 08, 2015 5:24 pm

Your canvas is 100x100 size, yet you are drawing to { 0, 200 } - { 0,300 } - { 100, 300 }, which is out of the canvas area.
I didn't try out the code if this is the case, but it is most likely the reason why you arent seeing anything.

nice · Post by **nice** » Thu Jan 08, 2015 5:29 pm

Muris wrote:Your canvas is 100x100 size, yet you are drawing to { 0, 200 } - { 0,300 } - { 100, 300 }, which is out of the canvas area.
I didn't try out the code if this is the case, but it is most likely the reason why you arent seeing anything.

I decided to increase the size of the polygon canvas from 100, 100 to 500, 500 and it was as you said!
They were there but they wasn't.

s-ol · Post by **s-ol** » Thu Jan 08, 2015 5:40 pm

nice wrote:
Muris wrote:Your canvas is 100x100 size, yet you are drawing to { 0, 200 } - { 0,300 } - { 100, 300 }, which is out of the canvas area.
I didn't try out the code if this is the case, but it is most likely the reason why you arent seeing anything.
I decided to increase the size of the polygon canvas from 100, 100 to 500, 500 and it was as you said!
They were there but they wasn't.

Why do you have seperate canvas' for the three "primitives"? you could draw them on one just as well.

nice · Post by **nice** » Fri Jan 09, 2015 7:55 am

S0lll0s wrote:
nice wrote:
Muris wrote:Your canvas is 100x100 size, yet you are drawing to { 0, 200 } - { 0,300 } - { 100, 300 }, which is out of the canvas area.
I didn't try out the code if this is the case, but it is most likely the reason why you arent seeing anything.
I decided to increase the size of the polygon canvas from 100, 100 to 500, 500 and it was as you said!
They were there but they wasn't.
Why do you have seperate canvas' for the three "primitives"? you could draw them on one just as well.

Well right now I'm just playing around to see what's happening but sure I will try out what you mentioned.

nice · Post by **nice** » Fri Jan 09, 2015 9:32 am

S0lll0s wrote:Why do you have seperate canvas' for the three "primitives"? you could draw them on one just as well.

Is this how you meant?

Code: Select all

local	rectangleCanvas = love.graphics.newCanvas(100, 100) -- Rectangle Canvas
local	circleCanvas = love.graphics.newCanvas(100, 100) -- Circle Canvas
local   polygonCanvas = love.graphics.newCanvas(300, 300) -- Polygon Canvas 

local 	allCanvas = love.graphics.newCanvas(800, 600) -- Draws Everything 	


function love.load()
--[[

-- Separate Canvases --

-- Rectangle

	love.graphics.setCanvas(rectangleCanvas)
		rectangleCanvas:clear()
		love.graphics.setColor(0, 255, 0, 128)
		love.graphics.rectangle('fill', 0, 0, 100, 100)
	love.graphics.setCanvas()

-- Circle

	love.graphics.setCanvas(circleCanvas)
		circleCanvas:clear()
		love.graphics.setColor(255, 0, 0, 128)
		love.graphics.circle('fill', 50, 50, 50, 50)
	love.graphics.setCanvas()

-- Polygon

	love.graphics.setCanvas(polygonCanvas)
		polygonCanvas:clear()
		love.graphics.setColor(0, 0, 255, 128)
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
	love.graphics.setCanvas()
]]--

-- One Canvas For All

-- All Canvases (Rectangle, Circle And Polygon)

	love.graphics.setCanvas(allCanvas)
		allCanvas:clear()

		love.graphics.setColor(0, 255, 0, 128) -- Green
		love.graphics.rectangle('fill', 0, 0, 100, 100) -- Rectangle

		love.graphics.setColor(255, 0, 0, 128) -- Red
		love.graphics.circle('fill', 50, 150, 50, 50) -- Circle

		love.graphics.setColor(0, 0, 255, 128) -- Blue
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300) -- Polygon

	love.graphics.setCanvas()

end



function love.draw()

love.graphics.setColor(255, 255, 255, 255)

--[[
-- Separate Canvases --

-- Rectangle

	love.graphics.setCanvas(rectangleCanvas)
		rectangleCanvas:clear()
		love.graphics.setColor(0, 255, 0, 128)
		love.graphics.rectangle('fill', 0, 0, 100, 100)
	love.graphics.setCanvas()

-- Circle

	love.graphics.setCanvas(circleCanvas)
		circleCanvas:clear()
		love.graphics.setColor(255, 0, 0, 128)
		love.graphics.circle('fill', 50, 50, 50, 50)
	love.graphics.setCanvas()

-- Polygon

	love.graphics.setCanvas(polygonCanvas)
		polygonCanvas:clear()
		love.graphics.setColor(0, 0, 255, 128)
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
	love.graphics.setCanvas()
]]--

-- Canvas (Drawn To The Left)
love.graphics.draw(allCanvas) -- Canvas That Draws Everything

love.graphics.draw(rectangleCanvas) -- Rectangle
love.graphics.draw(circleCanvas, 0, 100) -- Circle
love.graphics.draw(polygonCanvas, 0, 0) -- Polygon

-- Canvas (Drawn In The Middle)
love.graphics.draw(allCanvas, 100, 0) -- Canvas That Draws Everything

love.graphics.draw(rectangleCanvas, 100, 0) -- Rectangle
love.graphics.draw(circleCanvas, 100, 100) -- Circle
love.graphics.draw(polygonCanvas, 100, 0) -- Polygon


-- Normal (Drawn To The Right)

-- Rectangle
love.graphics.setColor(0, 255, 0, 128)
love.graphics.rectangle('fill', 200, 0, 100, 100)

-- Circle
love.graphics.setColor(255, 0, 0, 128)
love.graphics.circle('fill', 250, 150, 50, 50)

end

s-ol · Post by **s-ol** » Fri Jan 09, 2015 2:38 pm

nice wrote:

S0lll0s wrote:Why do you have seperate canvas' for the three "primitives"? you could draw them on one just as well.

Is this how you meant?

Code: Select all

local	rectangleCanvas = love.graphics.newCanvas(100, 100) -- Rectangle Canvas
local	circleCanvas = love.graphics.newCanvas(100, 100) -- Circle Canvas
local   polygonCanvas = love.graphics.newCanvas(300, 300) -- Polygon Canvas 

local 	allCanvas = love.graphics.newCanvas(800, 600) -- Draws Everything 	


function love.load()
--[[

-- Separate Canvases --

-- Rectangle

	love.graphics.setCanvas(rectangleCanvas)
		rectangleCanvas:clear()
		love.graphics.setColor(0, 255, 0, 128)
		love.graphics.rectangle('fill', 0, 0, 100, 100)
	love.graphics.setCanvas()

-- Circle

	love.graphics.setCanvas(circleCanvas)
		circleCanvas:clear()
		love.graphics.setColor(255, 0, 0, 128)
		love.graphics.circle('fill', 50, 50, 50, 50)
	love.graphics.setCanvas()

-- Polygon

	love.graphics.setCanvas(polygonCanvas)
		polygonCanvas:clear()
		love.graphics.setColor(0, 0, 255, 128)
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
	love.graphics.setCanvas()
]]--

-- One Canvas For All

-- All Canvases (Rectangle, Circle And Polygon)

	love.graphics.setCanvas(allCanvas)
		allCanvas:clear()

		love.graphics.setColor(0, 255, 0, 128) -- Green
		love.graphics.rectangle('fill', 0, 0, 100, 100) -- Rectangle

		love.graphics.setColor(255, 0, 0, 128) -- Red
		love.graphics.circle('fill', 50, 150, 50, 50) -- Circle

		love.graphics.setColor(0, 0, 255, 128) -- Blue
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300) -- Polygon

	love.graphics.setCanvas()

end



function love.draw()

love.graphics.setColor(255, 255, 255, 255)

--[[
-- Separate Canvases --

-- Rectangle

	love.graphics.setCanvas(rectangleCanvas)
		rectangleCanvas:clear()
		love.graphics.setColor(0, 255, 0, 128)
		love.graphics.rectangle('fill', 0, 0, 100, 100)
	love.graphics.setCanvas()

-- Circle

	love.graphics.setCanvas(circleCanvas)
		circleCanvas:clear()
		love.graphics.setColor(255, 0, 0, 128)
		love.graphics.circle('fill', 50, 50, 50, 50)
	love.graphics.setCanvas()

-- Polygon

	love.graphics.setCanvas(polygonCanvas)
		polygonCanvas:clear()
		love.graphics.setColor(0, 0, 255, 128)
		love.graphics. polygon('fill', 0, 200, 0, 300, 100, 300)
	love.graphics.setCanvas()
]]--

-- Canvas (Drawn To The Left)
love.graphics.draw(allCanvas) -- Canvas That Draws Everything

love.graphics.draw(rectangleCanvas) -- Rectangle
love.graphics.draw(circleCanvas, 0, 100) -- Circle
love.graphics.draw(polygonCanvas, 0, 0) -- Polygon

-- Canvas (Drawn In The Middle)
love.graphics.draw(allCanvas, 100, 0) -- Canvas That Draws Everything

love.graphics.draw(rectangleCanvas, 100, 0) -- Rectangle
love.graphics.draw(circleCanvas, 100, 100) -- Circle
love.graphics.draw(polygonCanvas, 100, 0) -- Polygon


-- Normal (Drawn To The Right)

-- Rectangle
love.graphics.setColor(0, 255, 0, 128)
love.graphics.rectangle('fill', 200, 0, 100, 100)

-- Circle
love.graphics.setColor(255, 0, 0, 128)
love.graphics.circle('fill', 250, 150, 50, 50)

end

Except for that you still draw the seperste canvas' on the left side (although they should be empty?)

[SOLVED]Drawing a polygon to a canvas

[SOLVED]Drawing a polygon to a canvas

Re: Drawing a polygon to a canvas

Re: Drawing a polygon to a canvas

Re: Drawing a polygon to a canvas

Re: Drawing a polygon to a canvas

Re: Drawing a polygon to a canvas

Re: Drawing a polygon to a canvas

Who is online