AKA CACL (pronounced Cackle)
Demo: https://efhiii.github.io/CACL
The HTML Canvas has a decent drawing API, and there are other libraries like P5.js that do a good job of adding convenience functions for it. Unfortunately, most libraries have a problem. They don't do anti-aliasing properly. Usually it's not very noticeable, but for some things, it's very noticeable. Just to illustrate the problem, here's an example of what a green circle looks like on a red background using the HTML Canvas API.
!(image of green circle on red background with dark outline)[]
Here's what it looks like using this library.
!(image of green circle on red background without dark outline)[]
This reason it's wrong has to do with linear color interpolation in sRGB, which is not a linear color space. The problem becomes even more apparent when animating shapes.
Notice the flickering.
Here's the same thing, but using this library:
This library renders shapes, lines, curves, bitmaps, and images with color-accurate blending and antialiasing. Normal text isn't supported at the moment, but to compensate, a custom form of bitmap fonts is and extended versions of Press Start 2P and Minecraft are included. If you want non-bitmap fonts, it's recommended to use HTML elements placed on top of the canvas via CSS. Nothing is supported at the moment.
It's important to note that all colors are worked on in the linear sRGB space. convenience functions are available for converting from other common formats.
A full list of functions is bellow:
- Returns:
cacl.context
Creates a CACL context for a canvas
draws the CACL context to its canvas This is when the conversion for linear sRGB to sRGB happens
sets the width and height of the CACL context's canvas
- default:
blend
- options:
blend
,add
,multiply
,darkest
,lightest
,difference
,subtract
,exclusion
,screen
,replace
,remove
,overlay
,hard light
,soft light
,dodge
,burn
clears the CACL canvas and sets every pixel to the color color
sets the fill color of the CACL context
sets the fill color of the CACL context
sets to not fill shapes
sets to not outline shapes
sets the size of strokes
fills a rectangle at (x, y)
of width w
and height h
if radius is set, the corners will be rounded with a radius of radius
pixels
fills a circle at (x, y)
with a radius of radius
fills an ellipse at (x, y)
with a width of w
and height of h
- Returns:
{r, g, b, a}
- Returns:
{r, g, b, a}
- Returns:
{r, g, b, a}
- Returns:
{r, g, b, a}
- Returns:
{r, g, b, a}
- Returns:
float
- Returns:
{r, g, b, a}
- Returns:
{r, g, b, a}
- Returns:
{r, g, b, a}
- Returns:
{x: float, y: float}
takes in 4 points,{x, y}
; starting pointp1
, ending pointp2
, control point 1m1
, and control point 2,m2
, and returns the interpolated point t along.
- Returns:
float
takes in a bezier object{p1, p2, m1, m2}
and returns they
position of a point on the bezier atx
If there are multiple points on the bezier atx
, it will only return they
position of one of them The process is iterative. By default, it does 20 steps which can be changed viaresolution
easeValue(atTime, fromTime, toTime, fromValue, toValue, easeA, easeB, beforeFromTime = false, afterToTime = false, beforeFromValue = false, afterToValue = false, resolution = 20)
- Returns:
float
returns a value eased betweenfromValue
andtoValue
atatTime
optionally taking into account a previous control point and/or a subsequent control point