Draw hole in a canvas

Peer support for Air Manager desktop users

Moderators: russ, Ralph

Message
Author
a533
Posts: 49
Joined: Fri Apr 09, 2021 3:25 pm

Draw hole in a canvas

#1 Post 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

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Draw hole in a canvas

#2 Post 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
Last edited by Keith Baxter on Wed Apr 28, 2021 1:14 pm, edited 1 time in total.
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

User avatar
Sling
Posts: 5237
Joined: Mon Sep 11, 2017 2:37 pm
Contact:

Re: Draw hole in a canvas

#3 Post 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.

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Draw hole in a canvas

#4 Post 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
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

a533
Posts: 49
Joined: Fri Apr 09, 2021 3:25 pm

Re: Draw hole in a canvas

#5 Post 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

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Draw hole in a canvas

#6 Post 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
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Draw hole in a canvas

#7 Post 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
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Draw hole in a canvas

#8 Post 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
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Draw hole in a canvas

#9 Post 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
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Draw hole in a canvas

#10 Post 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
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

Post Reply