Data

Tools

Indexes

Applications

Experiments

Open Source Science

Recent Releases of https://github.com/caleb531/jcanvas

https://github.com/caleb531/jcanvas - 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

js $('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 });

- TypeScript
Published by caleb531 about 2 years ago

https://github.com/caleb531/jcanvas - v22.1.2

  • Fixed mouse events and draggability for SVG path layers drawn with drawPath()

Download at https://www.npmjs.com/package/jcanvas

- TypeScript
Published by caleb531 about 2 years ago

https://github.com/caleb531/jcanvas - v22.1.1

  • Fixed a bug from v22.1.0 where masking was not properly enabled for SVG paths drawn with drawPath()

- TypeScript
Published by caleb531 about 2 years ago

https://github.com/caleb531/jcanvas - 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.

js // 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.

- TypeScript
Published by caleb531 about 2 years ago

https://github.com/caleb531/jcanvas - v22.0.1

  • Fixed a CI issue where the bundles where not included with the npm tarball

See the v22.0.0 release notes for what's new in v22.

- TypeScript
Published by caleb531 over 2 years ago

https://github.com/caleb531/jcanvas - 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.

- TypeScript
Published by caleb531 over 2 years ago

https://github.com/caleb531/jcanvas - v21.0.1

  • Fixed a bug where removeLayers() would cause an infinite loop

- TypeScript
Published by caleb531 about 8 years ago

https://github.com/caleb531/jcanvas - v21.0.0

  • No API changes
  • Mark jQuery as a peer dependency
    • This fixes nsp security warning indicating that jQuery 2.x in insecure

- TypeScript
Published by caleb531 over 8 years ago

https://github.com/caleb531/jcanvas - v20.2.0

  • Allow the drawLayers() method to accept an optional complete callback, useful when dealing with image layers (which are drawn asynchronously)

- TypeScript
Published by caleb531 over 8 years ago

https://github.com/caleb531/jcanvas - v20.1.4

  • Fix a bug where measureText() would measure the text as though the text could wrap, even if no maxWidth was set

- TypeScript
Published by caleb531 over 8 years ago

https://github.com/caleb531/jcanvas - v20.1.3

  • Fixed an issue with using fromCenter: false in Handles plugin
  • Fixed an issue where the imageSmoothing property (documented here) was not recognized

- TypeScript
Published by caleb531 over 8 years ago

https://github.com/caleb531/jcanvas - v20.1.2

  • Fixed a bug where pixels manipulated by setPixels() would be mispositioned on a canvas with a pixel density ratio other than 1
    • This would happen if detectPixelRatio() was called on a high-PPI device (such as retina-display iPhones and Macs)

- TypeScript
Published by caleb531 almost 9 years ago

https://github.com/caleb531/jcanvas - v20.1.1

  • Fixed a error being thrown for apps using with jQuery 3.x

- TypeScript
Published by caleb531 almost 9 years ago

https://github.com/caleb531/jcanvas - v20.1.0

  • Fixed a critical bug with drawText() text position introduced in v20.0.0
  • Added new constrainDragX and constrainDragY properties for manipulating the behavior of layer-dragging (e.g. snap to grid); see the docs on Draggable Layers for details
  • Removed use of the deprecated mozImageSmoothingEnabled property when applying image smoothing, thus eliminating the console warning in Firefox
  • Reduced the number of redraws required when draggable layers are present on the canvas

- TypeScript
Published by caleb531 almost 9 years ago

https://github.com/caleb531/jcanvas - v20.0.0

  • No API changes
  • Switched to using Grunt as a proper build system for the entire project
    • For better project organization, all source files have been moved to the dist/ directory
  • jCanvas releases will now use semantic versioning from hereon, beginning with v20.0.0 (this release)

- TypeScript
Published by caleb531 about 9 years ago