Draw hole in a canvas

Peer support for Air Manager desktop users

Moderators: russ, Ralph

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

Re: Draw hole in a canvas

#11 Post by JackZ »

@Keith Baxter
Yes, I figured rapidly that you misunderstood my whole point. Canvas_draw() method is good for SOME purposes, as static image manipulations are for others.

The key here is efficiency.
The OP asked how to create an hollow black mask with a rectangular opening. In Skinman, it takes two seconds to do that(one can even add drop shadows), and one line of code.
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

#12 Post by Keith Baxter »

JackZ wrote: Wed Apr 28, 2021 5:36 pm @Keith Baxter
Yes, I figured rapidly that you misunderstood my whole point. Canvas_draw() method is good for SOME purposes, as static image manipulations are for others.

The key here is efficiency.
The OP asked how to create an hollow black mask with a rectangular opening. In Skinman, it takes two seconds to do that(one can even add drop shadows), and one line of code.
Jacques,

Does that mean you not going to play anymore. :(

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

#13 Post by JackZ »

@Keith Baxter My friend, as you perfectly said, if the goal is to display different techniques and results, why not, but that’s no longer a challenge, as the goals will be different.

I can join though your Discord at some time to show how to use Skinman to create masks with holes for example.

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

#14 Post by Keith Baxter »

JackZ wrote: Wed Apr 28, 2021 6:26 pm @Keith Baxter My friend, as you perfectly said, if the goal is to display different techniques and results, why not, but that’s no longer a challenge, as the goals will be different.

I can join though your Discord at some time to show how to use Skinman to create masks with holes for example.

Jacques
Awesome Jacques.

Lets do that next week and advertise so that peeps can plan.

I did this quick texture. It can be enhanced. But you get the gist.

I will do lots of ideas and enhancements.

Code: Select all

my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#2a2a2a")

  for i = 0,350 do  
   _move_to(0+(i*8),0)
   _line_to(0,0+(i*8))
   _stroke("#515151",1)
  end  
end)
Keith

EDIT:
I am currently sharing my screen so all feel free to pop in and ask questions of simply just watch.
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

#15 Post by a533 »

It works, thank you
Keith Baxter wrote: Wed Apr 28, 2021 2:13 pm 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

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

Re: Draw hole in a canvas

#16 Post by a533 »

I have made a “dark” panel, changing the opacity of a black cover. If I use a PNG for black cover I for some reason I get a white rim around the instrument, no matter how much I enlarge the cover to overlap.

Image

However, if I use a vectored black cover it works fine and there is no white rim.

Code: Select all

img_cover=canvas_add(0,0,512,512)
  
canvas_draw(img_cover, function()
    _circle(256,256,236)
    _fill("#000000") 
end)  

Regards,
AQ

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. 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

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

Re: Draw hole in a canvas

#17 Post by Keith Baxter »

Hi,

Looks like you are winning. Great job

Sorry for hijacking the thread.

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

#18 Post by JackZ »

a533 wrote: Wed Apr 28, 2021 7:29 pm I have made a “dark” panel, changing the opacity of a black cover. If I use a PNG for black cover I for some reason I get a white rim around the instrument, no matter how much I enlarge the cover to overlap.

Image

However, if I use a vectored black cover it works fine and there is no white rim.

Code: Select all

img_cover=canvas_add(0,0,512,512)
  
canvas_draw(img_cover, function()
    _circle(256,256,236)
    _fill("#000000") 
end)  

Regards,
AQ
If you want a dark circle only without a white border, then you should create a png image of the circle only, the surrounding color being transparent, and save the image under the png format with alpha channel to have the transparency included.
Standard png format does NOT include alpha channel, and the transparent color is replaced by either white or black.

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

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

Re: Draw hole in a canvas

#19 Post by a533 »

If you want a dark circle only without a white border, then you should create a png image of the circle only, the surrounding color being transparent, and save the image under the png format with alpha channel to have the transparency included.
Standard png format does NOT include alpha channel, and the transparent color is replaced by either white or black.

Jacques
I saved my PNG with alpha channel and still got the thin white border around the instrument, see the image above labeled "opacity = 0.9". The thin white border started to show at apacity above 0.8. As you see at opacity 0.5 it almost doesn't show. I can send the source to you if you want. The only way to avoid it was to use a vectored circle in a canvas as a cover instead of the png.

AQ

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

Re: Draw hole in a canvas

#20 Post by JackZ »

Hmm weird. I suspect that the cover color is perhaps not 100% black?
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

Post Reply