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.