It's always been you, Canvas2D

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • talent.io - Download talent.io’s Tech Salary Report
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • standards-positions

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

  • caniuse

    Raw browser/feature support data from caniuse.com

    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?

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • Chart.js

    Simple HTML5 Charts using the <canvas> tag

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

  • GoJS, a JavaScript Library for HTML Diagrams

    JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

    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.

  • WHATWG HTML Standard

    HTML Standard

    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

  • canvas2D

    Update Canvas 2D API

    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.

  • design-reviews

    W3C specs and API reviews

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

  • talent.io

    Download talent.io’s Tech Salary Report. Median salaries, most in-demand technologies, state of the remote work... all you need to know your worth on the market by tech recruitment platform talent.io

  • glur

    Fast gaussian blur in pure JavaScript via IIR filer

    > 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

  • uPlot

    📈 A small, fast chart for time series, lines, areas, ohlc & bars

    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

  • CAM6

    Cellular Automata Machine (CAM6) Simulator

    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

  • BezierInfo-2

    The development repo for the Primer on Bézier curves, https://pomax.github.io/bezierinfo

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

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts