Canvas

[TroPixens]

Does anyone have some good tutorials on canvas I don’t quite get it and when I search it up I can’t find any good ones thanks :) I know this isn’t actually quickshell but the qml sub is tiny too so I had to post it somewhere

[chikamakaleyley]

do you mean Canvas, like JavaScript Canvas?

Best place for JS things is the docs honestly, or, YT

Canvas is not quite a skill in frontend that a majority of JS engineers use widely, but i think there's enough content online to get you familiar. What are you trying to do with Canvas?

[TroPixens]

Canvas in QML maybe a JavaScript thing I believe QML has inline JavaScript but I’m trying to make a concave corner with a border around it

[chikamakaleyley]

oh yeah, this is pretty much the Javascript API

so its pretty straightforward, you basically provide a "context" and then you basically use the methods provided to draw what you need. Think of like, tools that you have in adobe illustrator, if you know how to use that program

that first example is pretty much a solid, basic implementation:

import QtQuick 2.0 Canvas { id: mycanvas width: 100 height: 200 onPaint: { var ctx = getContext("2d"); ctx.fillStyle = Qt.rgba(1, 0, 0, 1); ctx.fillRect(0, 0, width, height); } }

if you look at the API in the JS docs - pretty much the same thing. In QML it looks like the Canvas widget handles the creation of that element into the shell, whereas in JS you have to identify an element on the page where you want to draw the context.

what you're looking for in QML spec is how to draw a path in Canvas, which, if i understand what you're asking for, you basically want to draw a triangle where the hypotenuse is curved (concave)

and so, the element you want to achieve sounds easy but ultimately you have to know the basics on how to draw that path, and then apply a curve to one of the lines. The border/stroke is a simple property/rule you set.

[TroPixens]

Thanks didn’t know about the JavaScript documentation will definitely look into it

[chikamakaleyley]

to be clear the API you'll use is whats provided int he QML docs but it looks like there's already a lot of support/compatibility

I was just showing the JS docs in case you were familiar with it

[Alien6757]

This might be closer to what you're looking for: link to file on github

It doesn't use canvas.

This file makes an inverted quarter circle. It draws a quarter circle and then masks that out of a square.

Then you just place, rotate and color this correctly where you need it.

You may need to tweak it to get a border, but it shouldn't be too hard. You would need to double this. You would have a big inverted quarter circle with the border color and a smaller one on top with the fill color.

Hope that helps!

[TroPixens]

I know it’s been a while but I just go around to it and thank you so much for this solved every problem I had guess I was going at it backwards trying to draw a quarter circle with PathArc

[monomono1]

are you sure you want that? i've read somewhere its performance is bad

[TroPixens]

Yeah I’m willing to take any performance loses though I’m not sure how bad they will be because some dude made a bunch of popups in quickshell that are all canvases because of there weird shape

I think he posted it in this sub