)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Airbrush-esque

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. const brush = document.createElement('canvas');
  5. const brushC = brush.getContext('2d');
  6.  
  7. canvas.width = innerWidth;
  8. canvas.height = innerHeight;
  9. brush.width = innerWidth;
  10. brush.height = innerHeight;
  11.  
  12. document.body.appendChild(canvas);
  13.  
  14. c.fillStyle = 'black'
  15. c.fillRect(0, 0, canvas.width, canvas.height);
  16.  
  17. let brushSize = 50;
  18. let featherSize = .1;
  19. let featherSteps = Math.floor(brushSize * featherSize) + 1;
  20. let st = brushSize - featherSteps;
  21.  
  22. let a = 0;
  23. if (st < 1) st = 1;
  24. for (let i = 0; i < st; i++) {
  25.   a = 1 / (st - i)
  26.   c.strokeStyle = `rgba(255, 255, 255, ${a})`;
  27.   console.log(c.strokeStyle)
  28.   c.lineWidth = brushSize - i;
  29.   c.lineJoin = 'round'
  30.   c.lineCap = 'round'
  31.   c.beginPath();
  32.   c.moveTo(50, 50);
  33.   c.lineTo(200, 200);
  34.   c.bezierCurveTo(300, 200, 400, 200, 300, 400);
  35.   c.stroke();
  36. }
snippet.zone ~ 2021-24 /// {s/z}