createBillboardPointCallback.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /**
  2. * Creates a {@link createBillboardPointCallback.CanvasFunction} that will create a canvas with a point.
  3. *
  4. * @param {number} centerAlpha The alpha of the center of the point. The value must be in the range [0.0, 1.0].
  5. * @param {string} cssColor The CSS color string.
  6. * @param {string} cssOutlineColor The CSS color of the point outline.
  7. * @param {number} cssOutlineWidth The width of the outline in pixels.
  8. * @param {number} pixelSize The size of the point in pixels.
  9. * @return {createBillboardPointCallback.CanvasFunction} The function that will return a canvas with the point drawn on it.
  10. *
  11. * @private
  12. */
  13. function createBillboardPointCallback(
  14. centerAlpha,
  15. cssColor,
  16. cssOutlineColor,
  17. cssOutlineWidth,
  18. pixelSize
  19. ) {
  20. return function () {
  21. const canvas = document.createElement("canvas");
  22. const length = pixelSize + 2 * cssOutlineWidth;
  23. canvas.height = canvas.width = length;
  24. const context2D = canvas.getContext("2d");
  25. context2D.clearRect(0, 0, length, length);
  26. if (cssOutlineWidth !== 0) {
  27. context2D.beginPath();
  28. context2D.arc(length / 2, length / 2, length / 2, 0, 2 * Math.PI, true);
  29. context2D.closePath();
  30. context2D.fillStyle = cssOutlineColor;
  31. context2D.fill();
  32. // Punch a hole in the center if needed.
  33. if (centerAlpha < 1.0) {
  34. context2D.save();
  35. context2D.globalCompositeOperation = "destination-out";
  36. context2D.beginPath();
  37. context2D.arc(
  38. length / 2,
  39. length / 2,
  40. pixelSize / 2,
  41. 0,
  42. 2 * Math.PI,
  43. true
  44. );
  45. context2D.closePath();
  46. context2D.fillStyle = "black";
  47. context2D.fill();
  48. context2D.restore();
  49. }
  50. }
  51. context2D.beginPath();
  52. context2D.arc(length / 2, length / 2, pixelSize / 2, 0, 2 * Math.PI, true);
  53. context2D.closePath();
  54. context2D.fillStyle = cssColor;
  55. context2D.fill();
  56. return canvas;
  57. };
  58. }
  59. /**
  60. * A function that returns a canvas containing an image of a point.
  61. * @callback createBillboardPointCallback.CanvasFunction
  62. * @returns {HTMLCanvasElement} The result of the calculation.
  63. */
  64. export default createBillboardPointCallback;