pts VS Scrawl-canvas

Compare pts vs Scrawl-canvas and see what are their differences.

Scrawl-canvas

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun (by KaliedaRik)
Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
pts Scrawl-canvas
10 37
5,090 302
- -
7.2 8.8
25 days ago 5 days ago
TypeScript JavaScript
Apache License 2.0 GNU General Public License v3.0 or later
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

pts

Posts with mentions or reviews of pts. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-10-23.

Scrawl-canvas

Posts with mentions or reviews of Scrawl-canvas. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2024-03-21.
  • Show HN: Dropflow, a CSS layout engine for node or <canvas>
    15 projects | news.ycombinator.com | 21 Mar 2024
    > working with glyphs and iterating them in reverse for RTL is brain-breaking. And line wrapping gets really complicated. It's also the most obscure because nobody has written down everything you need to know in one place

    I can confirm this. I've been working on a (much simpler!) text layout engine for my canvas library over the past couple of months and the amount of complexity associated with just stamping some glyphs onto a canvas has left me screaming at my laptop on an almost daily basis. Getting a decent underline was a proud moment!

    Question: did you ever find out what algorithm the various browsers are using to calculate how many words can fit on a given line? I'm almost there, except words will occasionally jump between lines when I scale the text. Really annoying!

    The PR's still a work in progress, but I've got all the functionality I want in there (shaping lines to fit in non-rectangular containers, styling text, text along a non-straight line, dynamic updates, etc). Just need to test and document it all now ... https://github.com/KaliedaRik/Scrawl-canvas/pull/75

  • Motion Canvas – Visualize complex ideas programmatically
    5 projects | news.ycombinator.com | 22 Feb 2023
    My canvas library's README[1] has a video embedded in it. FWIW I'm not convinced it adds anything to the library's sales pitch.

    [1] https://github.com/KaliedaRik/Scrawl-canvas

  • Egui commit: Implement accessibility APIs via AccessKit
    5 projects | news.ycombinator.com | 4 Dec 2022
    > And I’m just mentioning some of the unfixable problems with this approach

    I agree that using a canvas instead of leveraging existing accessibility supplied by HTML/CSS/JS and the DOM is an accessibility nightmare.

    However, I disagree that canvas accessibility issues are "unfixable". Difficult? Yes. But not unfixable. In my view, the element works best in partnership with its wider environment (HTML/CSS/JS and the DOM), not as a replacement for it. With that in mind, we can start to tackle the accessibility issues you raise - fonts, links, interactions, etc.[1][2]

    I have an ambition to one day become intelligent enough to understand/code in Rust, and I'm really glad to see that people are thinking about accessibility as a fundamental part of UIs being developed in Rust.

    [1] - Which is what my JS 2d canvas library tries to do: https://scrawl-v8.rikweb.org.uk/

    [2] - My thoughts on accessibility, and how I try to fix them using my library: https://scrawl-v8.rikweb.org.uk/learn/eleventh-lesson/

  • [AskJS] Why do my coworkers not see the value in frameworks?
    2 projects | /r/javascript | 15 Nov 2022
    If, however, your company is set on this course, I very strongly suggest you use a canvas library - if only for the MVP. Here's my canvas library (spam alert!) ... even if you don't use it in your product, the library might help give you some ideas on how to overcome some of the responsive, interactive and accessibility issues you'll be facing.
  • which technology or framework is used to create geometry-draggable canvas like this?
    7 projects | /r/Frontend | 23 Oct 2022
    Scrawl-canvas - example and another example (links to code at bottom of each page)
  • TypeScript is terrible for library developers
    16 projects | news.ycombinator.com | 23 Aug 2022
    My personal experience as a library developer, who has written my library in JS, not TS ...

    TS is an excellent choice for a lib dev starting a new project today. I can see the advantages of using TS for the library code - in particular for a library that gets popular and welcomes contributions from other developers. However TS is a nightmare for someone like me who: 1. started writing the library 9 years ago; 2. has let the library get "quite" big; and 3. has only learned to use TS in the past year (for the day job) and is nowhere near to becoming a types expert.

    I've had experience of people suggesting I rewrite the library in TS. Sometimes those suggestions have been quite 'evangelical' in their tone. As an (essentially) solo developer I just don't have the time, capacity or willingness to do that work - however much the end results might please others.

    I also understand that having type definitions file for the library's interface is, nowadays, a critical factor if the lib dev wants others to use the library in their projects. But writing a .d.ts file for a large, mature repo to at least help those potential users can quickly turn into a World of Hurt. I know this because I've done that work[1] and I never want to do it again.

    As much as I know that TS is a Force for Good in the JS coding world, there are days when I detest it!

    [1] - link to the Scrawl-canvas .d.ts file on GitHub - https://github.com/KaliedaRik/Scrawl-canvas/blob/master/sour...

  • Vector.js: an open source JavaScript library for creating interactive graphics
    2 projects | news.ycombinator.com | 12 Jun 2022
    All of them. Just set the background element in HTML and use these to draw over it. Look at the historical kitchen with overlaid dots on the page at https://scrawl-v8.rikweb.org.uk/
  • Ask HN: Can you share websites that are pushing the utility of browsers forward?
    12 projects | news.ycombinator.com | 15 May 2022
    Thank you for giving me the opportunity to showcase my JS canvas library, Scrawl-canvas[0], the aim of which is to help developers build responsive, interactive and more accessible canvas-based demos, infographics, art etc for their websites.

    While the library is entirely 2D-canvas oriented and doesn't use any ultra-new tech like WebGL (or even less-new tech like web workers), it does play nicely with WebAssembly-ported tech such as ML models from MediaPipe[1] and TensorFlow...

    [0] - https://scrawl-v8.rikweb.org.uk/

    [1] - https://codepen.io/kaliedarik/pen/PopBxBM (Warning: demo will request to use your device's camera)

  • Don't Write a Programming Language
    5 projects | news.ycombinator.com | 27 Feb 2022
    I've never written a programming language. I have built a number of constructed languages[1] over the past few decades, which is an equally selfish (and thankless) task.

    Less tangentially, I've worked for the past 8 years on building a HTML5 canvas library in Javascript[2]. I don't ever see people talking about JS libraries in terms of computer language design but I think, in a way, that is effectively what a (good) library is doing: building new, sometimes more developer-friendly, ways of conceptualising and creating programs that do stuff using novel APIs, syntax, state, etc.

    There's a lot in the OP that resonates with my experience:

    - "once you design a programming language you fall down a rabbit hole" - I've lost 8 years of my life to my project; but I've also gained 8 years of learning skills and insights that do translate to my everyday work as a frontend developer. For instance, almost all of my knowledge about accessibility comes from trying out many (many) different approaches to making the canvas element more accessible.

    - "You keep adding new features that are really cool" - Guilty! My library doesn't need an integrated reaction-diffusion engine, but somehow it's acquired one along the way. Similar story with the reduced palette filter which, while a lot of fun to build and play with, remains too slow for use in production eg dithering live-stream video.

    - "It also affects your communication with the rest of the programming community" - Because of the need for speedy calculations, I've developed an approach to programming Javascript which tends to avoid slower functionality. This sometimes leads to me writing code that could/should be written in a clearer, more concise and understandable way: 99% of JS code doesn't need to be super-fast, just fast enough!

    [1] - for example, this one: https://gevey.rikweb.org.uk/

    [2] - Scrawl-canvas - https://github.com/KaliedaRik/Scrawl-canvas

  • What stack did/would you use to build your portfolio website?
    2 projects | /r/Frontend | 4 Feb 2022
    I've used a Svelte|Page.js|Tailwind stack for both my poetry site, and my canvas library site. Despite both being content-heavy, neither have a database in the back end, just HTML partials served from an S3 bucket.

What are some alternatives?

When comparing pts and Scrawl-canvas you can also consider the following projects:

tsParticles - tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

particles-bg - React particles animation background component

fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

particles.js - A lightweight JavaScript library for creating particles

Mo.js - The motion graphics toolbelt for the web

GreenSock-JS - GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

barba - Create badass, fluid and smooth transitions between your website’s pages

p5.js - p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

the-cube - The Cube is an experiment with CSS3 transitions.

anime.js - JavaScript animation engine

animate.css - 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.