Page 1 of 3

Draw hole in a canvas

Posted: Wed Apr 28, 2021 12:46 pm
by a533
Hi, I would like to draw a rectangle with a smaller empty (transparent) rectangle inside. Something like this:

Image

Code: Select all

img_cover=canvas_add(0,0,800,335)
  
canvas_draw(img_cover, function()
    _rect(0,0,800,335	)
    _fill("#000000") 
end)
Who can I make the inside "transparent" rectangle?

Thank you and regards.

AQ

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 1:13 pm
by Keith Baxter
a533 wrote: Wed Apr 28, 2021 12:46 pm Hi, I would like to draw a rectangle with a smaller empty (transparent) rectangle inside. Something like this:

How can I make the inside "transparent" rectangle?

Thank you and regards.

AQ
Hi,

You have to draw the "BLACK" space and not the "WHITE" space.

I can show you on the discord if yo have some time.


Keith

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 1:14 pm
by Sling
Hi,

You can’t do it with a larger and smaller rect if that’s what you were thinking. That would be a cool feature. The clue is in the name canvas. So if you were to add a black rect and then a white rect on top you would now have 2 layers on a canvas. Even if you changed the opacity of the white rect it would just start to show through the black underneath. The basic way to do it is draw 4 rects and join them together.

It may also be possible to do something with polygons but I’d have to experiment with that before suggesting it as it’s been a while since i tinkered with polygon drawing.

@Keith Baxter loves to do stuff with the canvas and probably uses it more than most so he may also have an idea.

Oops looks like he answered already.

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 1:27 pm
by Keith Baxter
Hi,

What Tony says is correct. Punching transparency in canvas_draw() is a feature already requested. I think the more it is asked for the bigger the appetite to include.

You can achieve almost anything. Any shape. These two images use this technique where only the black outer shapes are drawn over a texture canvas.

It is a long process to try and explain. But I am willing to assist anybody by sharing my screen and I can help you become a pro. :D
ice_screenshot_20210428-151805.png
ice_screenshot_20210428-151832.png
Keith

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 1:51 pm
by a533
This works, thank you

Code: Select all

img_cover=canvas_add(0,0,800,335)
  
canvas_draw(img_cover, function()
    _rect(0,0,800,40	)
    _rect(0,278,800,57	)
    _rect(0,40,196,276	)
    _rect(631,40,169,276	)
    _fill("#000000") 
end)  
Thank you both. I'll stop by "discord" to see if there is a faster way.
AQ

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 2:13 pm
by Keith Baxter
Hi,

A bit more code but _arc() ,_quad_to() ,_ellipse(), _bezier_to() can be used to create shaped viewports.

Code: Select all

img_cover=canvas_add(0,0,800,400)
  
canvas_draw(img_cover, function()
   _move_to(200,50)
   _line_to(600,50)
   _line_to(600,350)
   _line_to(200,350)
   _line_to(200,0)   
   _line_to(0,0)
   _line_to(0,400)
   _line_to(800,400)
   _line_to(800,0)
   _line_to(199,0)
   _line_to(199,50)
   _line_to(200,50)   
  _fill("red")   
end)
Note how the last three line in the draw overlap. This is to ensure an overlap. In you version there are transparencies where the rectangles join/meet. I suggest you make them overlap a px or two. But you got the idea.

Keith

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 3:26 pm
by JackZ
Don’t blame me, but I don’t get it frankly.
Using canvas is really a waste of resources in that specific case IMHO.
Canvas is really useful for dynamically changing graphic elements.
In our case this is a mere static image with a hole inside.
As the others said there is no easy way to do this in canvas, and hence we have to create a mask around the “hole” using lots of basic shapes with complex calculation of coordinates.

All the while creating a very complex shape using boolean operation in a vector drawing program such as Inkscape or Skinman, is a snap. And only ONE img_add() line of code.

PLEASE use the proper tool (code) for the proper usage, and in that case, use of canvas_draw() is simply overkill IMHO. And it’s gonna be impractical to create a bezel with dropped shadows that will create a sense of depth, while it takes only a few seconds to do so in Skinman.

I anytime can take the challenge of creating a static panel background done entirely with canvas() versus the same one done as an image in Skinman.
That would be fun! Keith you’re up to? ;)

To answer to the OP, making such an empty rectangle with Skinman using Boolean operations is explained here:

https://siminnovations.com/forums/viewt ... f=16&t=474

Jacques

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 3:51 pm
by Keith Baxter
Jacques,

Challenge accepted. On condition we share our screens on the discord so that peeps can see what both benefits and downfalls are.
Hope I don't slip on my donkey here. :mrgreen: :mrgreen:

Some homework is necessary both sides to prepare. Next week some time should be good for me.

I will create a dynamic canvas of textures and shapes.

Lets say
20 background colors,
10 textures
10 shapes
5 light effects

in less than 200 lines of code.


Keith

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 4:59 pm
by JackZ
Hmm.
Granted there are many ways to skin a cat, but some are more efficient than others, depending on the Cat. Thought I had made myself clear since last time: canvas is good for dynamic graphics, png images are better suited for permanent background.

So you prepare everything? The idea I had was to discover the final rendering to achieve on the spot,so we can assess the time taken by each solution. if we prepare anything beforehand we could be suspected of cheating, no?

Have never done this on Discord, but why not.

And if you are doing something dynamic, of course canvas is probably the preferred solution! That was all my point from the start, the right tool for the right purpose.
...the challenge of creating a static panel background done entirely with canvas() versus the same one done as an image in Skinman.
Doing a dynamic texture with still images is probably doable, have never tried. Could you show an example of what you had in mind?

Jacques

Re: Draw hole in a canvas

Posted: Wed Apr 28, 2021 5:24 pm
by Keith Baxter
JackZ wrote: Wed Apr 28, 2021 4:59 pm Hmm.
Granted there are many ways to skin a cat, but some are more efficient than others, depending on the Cat.

So you prepare everything? The idea I had was to discover the final rendering to achieve on the spot,so we can assess the time taken by each solution. if we prepare anything beforehand we could be suspected of cheating, no?

Have never done this on Discord, but why not.

And if you are doing something dynamic, of course canvas is probably the preferred solution! That was all my point from the start, the right tool for the right purpose.
...the challenge of creating a static panel background done entirely with canvas() versus the same one done as an image in Skinman.
Doing a dynamic texture with still images is probably doable, have never tried. Could you show an example of what you had in mind?

Jacques
Jacques,

Yes. I do need some time to prepare. Not so much anything other than texture patterns.

I did not think you wanted a race but a display of the different techniques and results.

I will do a texture of carbon fiber an example and post it here.

But brushed aluminum or wood paneling is also a possibility. Whilst textures are easily found in Skinman, the polygons to do that are not available and a library would have to be built.

For me it is all about sharing Ideas and techniques not who is faster. The end result hopefully is for the benefit of those taking interest.


Keith

EDIT: These are some of the textures I will attempt to make. You can understand that a library is necessary to do this.

ice_screenshot_20210406-150500.png
ice_screenshot_20210406-181441.png
ice_screenshot_20210406-181058.png
ice_screenshot_20210406-151405.png
ice_screenshot_20210406-151349.png