Constellations overlapping with outline

[umutesen]

I am using the latest version (0.7.7) and noticed that constellations appear on top of the outline border using the following configuration:

  background: {      // Background style
    fill: '#000000',   // Area fill
    opacity: 1,
    stroke: '#000000', // Outline
    width: 5
  }

Is there a way to set z-index of the outline or a way to make sure it appears on top of everything else?

[ofrohn]

Good catch! The outline is drawn after all the background items, but before all the foreground items. Apparently I considered constellation lines foreground when I did this, but fixed it in the latest version. Please check!

The only way to determine z-order when you draw on canvas is with the setting context.globalCompositeOperation, that allows to draw behind existing pixels, but needs to be done in code. Otherwise, everything is displayed in the order it is drawn, last on top.

[umutesen]

Thank you!

Following docs, I found that I can also manually draw a circle around the canvas using:

  Celestial.add({
    type: 'raw',
    callback: function (error, json) { },
    redraw: function () {

      const canvas = Celestial.context.canvas;
      const centerX = canvas.clientWidth / 2;
      const centerY = canvas.clientHeight / 2;
      let radius = canvas.clientWidth / 2;

      const context = canvas.getContext('2d');
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.lineWidth = 5;
      context.strokeStyle = '#ffffff';
      context.closePath();
      context.stroke();
    }
  });

I obviously prefer not to reinvent the wheel so I'll get the latest!