Relative shadow sizes using drawingContext in p5.js

Question

I'm having issues keeping my shadows consistent across different resolutions using the following:

  drawingContext.shadowOffsetY = 0;
  drawingContext.shadowBlur = w(0.01);
  drawingContext.shadowColor = 'black';

where

function w(val) {if (val == null) return width;return width * val;}

defines the relative size .

Any tips on how to keep tie the size of the shadow to the resolution?

Thanks

score 1 · Answer 1 · answered May 16 '22 at 21:51

1

A ratio of the display with makes sense (at least for square compositions), but you might also want to support different display densities (e.g. for Apple Retina displays, smart phones, etc.). To do this look into:

answered May 16 '22 at 21:51

George Profenza

50,687
19
144
218

1

Thanks. I did end up using pixelDensity() when I was working on this - took some tinkering, but it worked in the end. – Anton E May 17 '22 at 21:25
@AntonE What was your final solution. I'm having the same problem. – Shane Richardson Jul 29 '22 at 17:22

Relative shadow sizes using drawingContext in p5.js

1 Answers1

Linked