Releases: caleb531/jcanvas
v23.0.0
jCanvas v23 is a major new release with full TypeScript support, more features for ellipses, and overall modernization of the codebase. As such, jCanvas v23 requires ES2020-compatible browsers.
Minimum Version Requirement Updates
jCanvas now requires jQuery 1.9 or newer. It also supports the following minimum browser versions:
- Chrome 80+
- Edge 80+
- Firefox 74+
- Safari 13.4+
The minimum required version of jQuery has also been increased from v1.4 to v1.9.
TypeScript
The entire library (as well as all included plugins) have been rewritten in TypeScript! This means that you no longer need to use packages like @types/jcanvas. However, the @types/jquery package is still required to enable type checking for jCanvas properties and methods.
New Website!
Coinciding with the release of jCanvas v23 is the release of a brand new jCanvas website! The entire website has been rewritten in Astro, and the documentation site has been completely rebuilt using Starlight for a much better experience. The sandbox has also received some major upgrades, including multiple cursors, code folding, basic autocomplete, and various bug fixes.
For more details, see the companion jcanvas-website release.
Partial Ellipses... With Arrows!
Just like the drawArc() method, the drawEllipse() method now supports the start and end properties to create elliptical arcs. Arrow support has also been added; please see the Arrows section of the jCanvas documentation
Removed Deprecated $.support.canvas
The $.support object was already deprecated as of jQuery 1.9. Therefore, in the interest of moving away from use of deprecated APIs, jCanvas has removed the $.support.canvas declaration.
Other Improvements
- The codebase has been substantially modernized to take advantage of the latest web capabilities introduced within the past 10 years. These include:
- Use of
let/constinstead ofvar - Use of optional chaining for common checks
- Use of
- Improved support for Pointer Events (
pointerdown,pointermove,pointerup)
Bug Fixes
- Fixed an error thrown when trying to add or remove a nonexistent layer from a group (using
addLayerToGrouporremoveLayerFromGroup)
v22.1.3
- Fixed another bug where masking would be undone for SVG paths drawn with
drawPath()- You can run the following example in the jCanvas sandbox to verify that masking now behaves correctly for SVG paths
$('canvas')
.drawPath({
layer: true,
mask: true,
strokeStyle: '#000',
strokeWidth: 2,
d: 'm46 71c-12.2 0-22-9.8-22-22 0-12.2 9.8-22 22-22 12.2 0 22 9.8 22 22 0 12.2-9.8 22-22 22z m103.5 159c-20.2 0-36.5-16.3-36.5-36.5 0-20.2 16.3-36.5 36.5-36.5 20.2 0 36.5 16.3 36.5 36.5 0 20.2-16.3 36.5-36.5 36.5z'
})
.drawRect({
layer: true,
fillStyle: '#c33',
x: 50, y: 50,
width: 100, height: 150,
fromCenter: false
});v22.1.2
v22.1.1
v22.1.0
jCanvas v22.1 is a modest release bringing several exciting features! To download, visit https://www.npmjs.com/package/jcanvas
SVG Paths
You can now render an SVG path onto the canvas using the drawPath() method's new d property! If you are familiar with SVG paths, the syntax is exactly what you're used to, and leverages native browser APIs to achieve full compliance with the SVG specification for paths! On top of that, it gives you access to jCanvas features like masking.
// Draw an SVG path directly onto the canvas
$('canvas').drawPath({
strokeStyle: '#000',
strokeWidth: 4,
d: 'M 25 25 l 50 50 q 25 -25 50 0 t 50 50 c 25 25 50 25 75 0 s 50 -25 75 0 a 20 20 0 0 1 25 25 z'
});A new fillRule property
You can now specify the fill rule of any drawing using the new fillRule property. For the most part, this controls how the drawing is filled/stroked. Accepted values are nonzero (the default), and evenodd.
True ellipses
For the longest time, jCanvas ellipses (drawn using drawEllipse or with addLayer({ type: 'ellipse' })) were drawn using Bézier curves because there was no native ellipse method in browsers at the time. However, times have changes, and jCanvas now renders ellipses using the native browser API! This means drawing ellipses is now slightly faster. It also means they will look slightly differently (because Bézier curves could never perfectly recreate an ellipse), but the result is so similar you will hardly notice a difference. I assure you: it's not a bug, it's a feature! 😅
Native rounded rectangles
Similarly, jCanvas always had to jump through some hoops to draw a rounded rectangle (drawn using drawRect or with addLayer({ type: 'rectangle' })). But now that browsers have native support for drawing rounded rectangles, jCanvas has been updated to take advantage of this native API! This means drawing rounded rectangles will be slightly faster, and they should look exactly the same as before.
v22.0.1
v22.0.0
jCanvas v22 is a modest new release with modernized infrastructure, source maps, and dropped IE support. There are no API changes.
ESM Support
jCanvas now supports ESM! To accommodate this change, the directory structure has changed. All UMD bundles are under a new dist/umd/ directory, and all ESM bundles are under the dist/esm/ directory.
Source Maps & New Directory Structure
The npm tarball for jCanvas now includes source maps! With this change, the full source versions of the library are now under the src/ directory (i.e. the full source bundles under the dist/ directory have been removed).
Dropped IE Support
Internet Explorer has been obsolete for some time, so support for it has been removed.