Thread by @davepvm

Here's a small thread of 5 useful but undocumented things you can do in #p5js (because they use drawingContext, the vanilla #javascript canvas API):

1. drawingContext.createLinearGradient() lets you create a gradient with as many colors as you want, at any angle you want, and lets use it as a fill style! developer.mozilla.org/en-US/docs/Web…

2. drawingContext.filter = `blur(${10 * pixelDensity()}px)` blurs everything you draw, and does it so much faster than the js-based blur() filter in p5 that you can use it in animations! developer.mozilla.org/en-US/docs/Web…

3. drawingContext.shadowBlur, shadowColor, shadowOffsetX and shadowOffsetY let you add drop shadows to anything that you draw developer.mozilla.org/en-US/docs/Web…

4. After drawing a shape, calling drawingContext.clip() will use that shape as a mask for anything new that you draw after that! developer.mozilla.org/en-US/docs/Web…

5. A few push() calls deep and want to know where the mouse coordinate is in local coordinates?
const matrix = drawingContext.getTransform();
const localCoord = matrix.inverse().transformPoint(new DOMPoint(mouseX*pixelDensity(), mouseY*pixelDensity()));

one more bonus that I remembered: drawingContext.globalAlpha = 0.5 lets you draw semitransparent shapes! developer.mozilla.org/en-US/docs/Web…