Skip to content

Kaiido/canvas-setClip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

setClip.js

A CanvasRenderingContext2D.setClip() and CanvasRenderingContext2D.resetClip() polyfill.

These methods are not yet part of the specs, but a long-dated request by web-devs 1, 2 which faced implementers' disapproval because they were supposedly impossible to implement.

This polyfill proves it's possible to have such methods, albeit through quite dirty overrides.

Additions to the CanvasDrawPath interface mixin:

interface mixin CanvasDrawPath {
  undefined setClip(optional CanvasFillRule fillRule = "nonzero");
  undefined setClip(Path2D path, optional CanvasFillRule fillRule = "nonzero");
  undefined resetClip();
}

Caveats

Because it overwrites all the drawing methods of the original context by using Path2D objects, this polyfill comes with a few caveats:

  • It requires native support for Path2D objects.
  • It may not be compatible with some drawing polyfills like ellipse or roundRect.
  • Drawing complex pathes when the context is transformed is slower when this polyfill is active.

For this last point, it is certainly best if you design your project to use only Path2D all along.

Should I use this polyfill?

Your call. You can, but it comes with no warranty and is more a proof-of-concept than a real production ready code.

Releases

No releases published

Packages

No packages published