Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
BezierInfo-2
The development repo for the Primer on Bézier curves, https://pomax.github.io/bezierinfo
Someone linked "Request for position" on these APIs: https://github.com/mozilla/standards-positions/issues/519#is...
Here's Mozilla's response:
--- start quote ---
4x4 transforms:
There are a bunch of implementation concerns here (and mentioned on that issue) with regards to availability on various native 2d backends... Needs more investigation
SVG filter interface:
We would really rather people use WebGL if you want fast/efficient filters. (I made a number of comments on that issue) As is, we're generally against this one for the time being
--- end quote ---
There's literally zero response on that from @mysteryDate who is now gaslighting Safari in the comment above, and presenting these API additions as fait accompli.
Honestly, at this point any time I see any public Chrome person write anything I immediately assume it's a distortion of reality at best and a blatant lie at worst. And this is always the case.
But sure. "Safari is the bad guy".
Can we use these yet?
ctx.createConicGradient() - 15.15% of users
https://caniuse.com/?search=createConicGradient
Not found on "Can I Use":
- All text modifiers
- ctx.roundRect()
- context.reset()
- CanvasFilter
- contextlost/contextrestored
Anyone know when these will be available in browsers?
In chart.js we have a very complex solution for dealing with this. We've gone through a number of iterations, but settled on a using ResizeObserver. You also need to listen to `window.resize` to get notified about DPR changes which can happen when a browser window is dragged from one screen to another.
https://github.com/chartjs/Chart.js/blob/master/src/platform...
My livelihood has been primarily building a Canvas diagramming library since 2010 (https://gojs.net), if anyone has any questions about 2D Canvas use in the real-world I'd be happy to answer them.
roundRect is great. Though you don't need 4 arcTo in order to make a rounded rect, you can use bezier instead (we do). Their example is also 1% amusing because they set the `fillStyle` but then call `stroke` (and not `fill`). I'll have to do some performance comparisons, since that's the operative thing for my use case (and any library author).
text modifiers are very welcome. It's crazy how annoying measuring still is, especially if you want thinks to look perfectly consistent across browsers. Though the chrome dominance is making things easier in one way, I guess.
context.reset is kinda funny. Most high-performance canvas apps will never want to use it. For that matter you want to set all properties as little as possible, especially setting things like context.font, which are slow even if you're setting it to the same value. (Or it was, I haven't tested that in several years).
I'm sure most users know this by now, but generally for performance the fewer calls you make to the canvas and the context, the beter. This is even true of transforms: It's faster to make your own Matrix class, do all your own matrix translation, rotation, multiplication, etc, and then make a single call to `context.setTransform`, than it is to call the other context methods.
I, too, had to look it up. This is about adding a (pseudo) perspective effect to the 2D canvas yes? There is an open issue in the whatwg/html repo[1] asking for this functionality - I have no idea whether the request will be taken forward by any browsers.
The current solution is to "roll your own" functionality. It is doable - for instance I've added such functionality to my canvas library[2]. The results work, but are slower than ideal.
[1] - https://github.com/whatwg/html/issues/5620
[2] - https://scrawl-v8.rikweb.org.uk/demo/dom-015.html
Look the proposal's still here!
https://github.com/fserb/canvas2D/blob/master/spec/perspecti...
If you raise an army of angry webdevs to yell at other browser implementers, I would be so very happy.
There was a ton of work across browser vendors to make this a part of spec:
https://html.spec.whatwg.org/multipage/canvas.html#the-canva...
It's all there. It's all official. That github page was just one part of reaching consensus. There's also TAG review:
https://github.com/w3ctag/design-reviews/issues/627
FWIW Mozilla and Safari signed off on all of these changes at some point in time somewhere, hence why it's allowed to be part of spec. There were some changes that were not allowed to be part of the new API because one of those two said no (like perspective transforms, conic curves).
> We would really rather people use WebGL if you want fast/efficient filters.
This one made me laugh. Yes, WebGL excels at pixel manipulations but it is possible to write fast and efficient filters to work in the 2D canvas environment.
For a case-in-point, I struggled for a long time to find a decent, fast implementation of a gaussian blur filter for my canvas library. Then I stumbled upon a JS implementation[1] based on some very clever work done by Intel devs which blew all my previous attempts out of the water - so of course I stole it (even though I still don't understand the approach they take)[2].
> "Safari is the bad guy"
As much as Safari often brings me to despair, I do like the work they've recently done to add color space support in CSS. They haven't yet pushed the functionality over to the canvas element, but I live in hope. For now, I have to emulate the calculations to get them working for my library[3].
[1] - https://github.com/nodeca/glur/blob/master/index.js
[2] - https://scrawl-v8.rikweb.org.uk/docs/source/factory/filterEn...
[3] - https://scrawl-v8.rikweb.org.uk/demo/canvas-059.html
you can use matchMedia to detect devicePixelRatio changes and re-sync:
https://github.com/leeoniya/uPlot/blob/190134aa844cfa2a0c052...
everything stays crisp even as you browser-zoom. e.g. https://leeoniya.github.io/uPlot/demos/area-fill.html
Oh, nicely done! Trying to code up cellular automata simulations are pretty much guaranteed to push my brains through my nostrils - I've never progressed far beyond classic Conway. Your CAM6 library[1] may be about to steal my weekend from me!
[1] - https://github.com/SimHacker/CAM6
You can use cubic Bézier curves to approximate a circular arc: https://pomax.github.io/bezierinfo/#circles_cubic. In many cases that's even how circular arcs are rendered, even when they are represented with a different data structure. You'll often see the the constant 0.5522... which is for quarter circles. E.g. both WPF and Java's Swing render arcs with that approximation, perhaps others, but those where the places where I checked the source code recently.
The benefit of doing this for quarter-circle arcs directly may be that you save a bunch of trigonometry that otherwise has to happen (cf. the Pomax link).