Leveraging new canvas api

[asturur]

Abandoning the old browsers means also we can use the newest canvas api finally.
In this simple article there are surfaced a bunch of api that we are not using:

https://developer.chrome.com/blog/canvas2d/

A simple task for anyone that would like to start contribute is to make a list of opportunity in that article and
open a single item task to implement it and then implement it. Some simple suggestions:

• ctx.reset when we need to clear a canvas
• ctx.roundedRect() instead of the mess we do for drawing rounded corners in rect
• ctx.filter = new CanvasFilter() for simple filters we have in our JS implementation
• ctx.textDecoration to swap our custom implementation

One task for 1 feature for 1 or more pr. ( not 1 pull request for 3 features )
For each feature verify which browser introduced support, list them in the task with a feature request, so that we can discuss if those are old enough to be used.

For whoever wants to contribute those small things, thank you in advance

[gloriousjob]

I was ready to look into roundedRect() but realized it's assuming a single radius value while fabric.js takes an rx and an ry, which means if the values are different, we use the current mess.

[asturur]

i have seen it supports an array of radius, am i wrong?

'''
The ctx.roundRect() method also takes in an array for the borderRadius argument of up to four numbers. These radii control the four corners of the rounded rectangle the same way as for CSS. For example:

'''

[asturur]

check the browser support first and give it a go if you want !

[ShaMan123]

ctx.reset when we need to clear a canvas

I pocked that a while back...
Didn't seem to offer anything to fabric

duplicate #7759

[asturur]

isn't reset good at leat to clear a canvas from a transformed state?

[ShaMan123]

I don't remember anymore what I checked

[ShaMan123]

context lost event is good for us

[gloriousjob]

Thanks, @asturur! That's what I get for looking at it late at night. I'll see if roundRect works similar to rx and ry.

[gloriousjob]

@asturur And I'm back... so the array is actually based on the 4 corners on the rectangle, not how far the radius goes horizontally or vertically (assuming I understand rx and ry correctly, since I don't use rounded rectangles in my use case). Like you can say I only want the top-left corner rounded this much and leave the others not rounded. Let me know if I misunderstand the idea of rx and ry.

[gloriousjob]

And I'm even more bummed. I tried updating the TextDecoration and it doesn't seem to work. Now that I check docs, I don't see where this function is available. It's almost like it was an early idea that didn't become official.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
https://github.com/fserb/canvas2D/blob/master/spec/text-modifiers.md

I feel bummed because I think I figured out a minimal solution, assuming ctx.textDecoration = 'underline' before a strokeText/fillText is how this should work. I'm 2/2 on not helping, despite trying.

[gloriousjob]

ctx.filter isn't supported on Safari (or if it does work, it's very slow). This article seems to be targeting Chrome and expecting other guys to catch up.
The context lost event isn't supported by Firefox or Safari.

@asturur Thought I don't like saying it, I feel like nothing can be worked here if we don't want to risk losing support of some browsers (or if we want two implementations, which is the opposite of what I think the intent is).