Scrawl-canvas Alternatives
Similar projects and alternatives to Scrawl-canvas
-
fabric.js
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
-
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!
-
tsParticles
tsParticles - Easily create highly customizable particles, confetti 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.
-
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 —
-
-
GreenSock-JS
GreenSock's GSAP JavaScript animation library (including Draggable).
-
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
-
Konva
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
-
barba
Create badass, fluid and smooth transition between your website's pages.
-
-
-
-
FizzBuzz Enterprise Edition
FizzBuzz Enterprise Edition is a no-nonsense implementation of FizzBuzz made by serious businessmen for serious business purposes.
-
EaselJS
The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
-
lowdefy
An open-source, self-hosted, low-code framework to build internal tools, web apps, admin panels, BI dashboards, workflows, and CRUD apps with YAML or JSON.
-
snipp.in
Fast, Light-weight, Notes, Snippet manager and code editor directly inside your browser
-
-
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.
-
gutenberg
A fast static site generator in a single binary with everything built-in. https://www.getzola.org
Scrawl-canvas reviews and mentions
-
Ask HN: Can you share websites that are pushing the utility of browsers forward?
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)
- Scrawl-canvas is a JavaScript library for building responsive, interactive and more accessible HTML5 canvas animations, infographics and scenes. Ask me anything about the library in the comments!
-
Justice Department Issues Web Accessibility Guidance Under the ADA
Concerning the inaccessibility of the element, I've done a lot of work with my JS canvas library[1] to try and make canvas-based infographics, animations, etc more accessible[2]. I've also written up a lesson on how to build an accessible canvas scene which some might find useful[3].
[1] - Obligatory link to Scrawl-canvas library (on GitHub): https://github.com/KaliedaRik/Scrawl-canvas
[2] - Sadly I don't have any evidence that my library's solutions help people with accessibility needs in the real world, because nobody seems interested in using it. I live in hope that this may change one day.
[3] - Accessible canvas lesson: https://scrawl-v8.rikweb.org.uk/learn/eleventh-lesson
-
Don't Write a Programming Language
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?
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.
-
Make Beautiful Gradients
I use a combination of Path2D and ctx.isPointInPath() - code here[1], line 1502 onwards
[1] https://github.com/KaliedaRik/Scrawl-canvas/blob/master/sour...
Just before Christmas I got an urge to add a dither filter to my JS canvas library. The past few weeks have certainly been a very intense adventure through a very deep rabbit hole involving color spaces, color distances and discovering how to generate a best-fit reduced palette of colors and then dither it (hello, blue noise!)
I finally managed to complete the work last week and I'm quite happy with the results. Using the library people can set the colors of graphical objects or gradients using any CSS color space string (RGB, HSL, HWB, LAB, LCH) and the color should render as expected. The reduce-noise filter uses LAB internally to calculate color distances, but in the end I compromised and used euler distances for the algorithm rather than one of the more modern algorithms.
Work is still on a branch in the library[1] but I'm hoping to merge it into the main code in the next week or so (after testing across devices/screens/etc).
Aside: Safari has gone ahead and introduced support for HWB, LAB and LCH color strings in CSS. Sadly, they're not recognised by Safari's canvas engine (yet). Also, their HSL and HWB gradients seem to be the same as the RGB gradients; their LAB/LCH gradients seem to dodge the dreaded Gray Zone.
[1] - https://github.com/KaliedaRik/Scrawl-canvas/tree/dec-21-dith...
-
WTF Do I Need to Create my Vision for my Website?
You could do this in my canvas library, or (to be fair to them) several other canvas libraries - Pixi.js, for instance, may be a good fit for your requirements. Though be aware that you'll need to know some Javascript if you choose to go the canvas route.
-
Making the whole web better, one canvas at a time
This.
The one major stumbling block not mentioned in the article is accessibility. OffscreenCanvas offers nothing to solving that problem.
Also, I don't understand people who complain that 2d canvas is slow; it isn't. What slows things down is poor planning and execution of the animation. For instance - does the entire Mandlebrot Set need to be calculated on every RequestAnimationFrame iteration? If I was tackling the problem I'd only calculate the data when one of the significant parameters changed - in a worker farm, wasm, whatever - and only update the display canvas when the results emerged.
My canvas library[1] relies heavily in normal canvases not attached to the DOM. Not only does it speed things up massively, it also allows the library to do things like make the canvas responsive[2].
[1] - Scrawl-canvas - https://scrawl-v8.rikweb.org.uk/
[2] - CodePen demo of a responsive canvas - https://codepen.io/kaliedarik/pen/jOmWwWy
-
Why I'm working on Open Source full time
I've just dedicated the best part of 2.5 years to working on my open source project[1] almost full-time. During that time I've managed to rewrite the entire library from scratch, discover a new purpose for its existence and (very selfishly) have a lot of fun with the library, pushing its boundaries and re-evaluating its 'API' as I discovered/explored the world of generative art.
Sadly my personal funds have run out and I've not been successful finding sponsors etc. But the work has helped me land a new/exciting full-time job so I've wasted nothing through my endeavour. I wish Will McGugan all the best at the start of his adventure, and hope he has as much fun as I've had over the next year or two!
-
New version of Scrawl-canvas - v8.6.1 - released today.
Scrawl-canvas is a Javascript library for creating responsive, interactive and accessible HTML5 canvas infographics and animation for modern websites. https://scrawl-v8.rikweb.org.uk/
- [AskJS] What is the best canvas library to make an app like figma or integromat?
-
[Showoff Saturday] My huge resources collection for web developers just hit over 500 hand-picked links! I bet you'll find *at least* one thing that improves your work day. 🧰
Scrawl-canvas,
-
[AskJS] Where are simple 2D/3D non-Geo, non-fancy libraries to be found ?!
Easel, Fabric, Konva, Mesh, P5, Paper, Pencil, Pixi, Pts, Scrawl-canvas, Three, Two.
-
“I hate almost all software” – Ryan Dahl (2011)
> Challenge: Come up with a list of websites that scores above 95 on Google page Speed insights. HN is one. The article linked here is another. Generally, programming-language home pages do well. What about the startup sites under `Show HN`?
My open-source project's home page[1] is currently scoring (for me) 98% on the Google Page Speed insights desktop tab[2]. Given that my project is a canvas library and that page is running 4 large/complex canvas demos, I think the Page Speed result says more about Google's test suite than it does about my page. For instance I know that Lighthouse does not include canvas elements when calculating the Largest Contentful Paint metric which my page should, by rights, score poorly on.
[1] - https://scrawl-v8.rikweb.org.uk/
[2] - The page consistently scores < 50% on the mobile tab
Stats
KaliedaRik/Scrawl-canvas is an open source project licensed under MIT License which is an OSI approved license.
Popular Comparisons
Are you hiring? Post a new remote job listing for free.