src/internal/drawCompositeImage.js
function renderLayers (context, layers, invalidated) {
  // Loop through each layer and draw it to the canvas
  layers.forEach((layer, index) => {
    if (!layer.image) {
      return;
    }

    context.save();

    // Set the layer's canvas to the pixel coordinate system
    layer.canvas = context.canvas;
    setToPixelCoordinateSystem(layer, context);

    // Render into the layer's canvas
    const colormap = layer.viewport.colormap || layer.options.colormap;
    const labelmap = layer.viewport.labelmap;
    const isInvalid = layer.invalid || invalidated;

    if (colormap && colormap !== '' && labelmap === true) {
      addLabelMapLayer(layer, isInvalid);
    } else if (colormap && colormap !== '') {
      addPseudoColorLayer(layer, isInvalid);
    } else if (layer.image.color === true) {
      addColorLayer(layer, isInvalid);
    } else {
      // If this is the base layer, use the alpha channel for rendering of the grayscale image
      const useAlphaChannel = (index === 0);

      addGrayscaleLayer(layer, isInvalid, useAlphaChannel);
    }

    // Apply any global opacity settings that have been defined for this layer
    if (layer.options && layer.options.opacity) {
      context.globalAlpha = layer.options.opacity;
    } else {
      context.globalAlpha = 1;
    }

    if (layer.options && layer.options.fillStyle) {
      context.fillStyle = layer.options.fillStyle;
    }

    // Set the pixelReplication property before drawing from the layer into the
    // composite canvas
    context.imageSmoothingEnabled = !layer.viewport.pixelReplication;
    context.mozImageSmoothingEnabled = context.imageSmoothingEnabled;

    // Draw from the current layer's canvas onto the enabled element's canvas
    const sx = layer.viewport.displayedArea.tlhc.x - 1;
    const sy = layer.viewport.displayedArea.tlhc.y - 1;
    const width = layer.viewport.displayedArea.brhc.x - sx;
    const height = layer.viewport.displayedArea.brhc.y - sy;

    context.drawImage(layer.canvas, sx, sy, width, height, 0, 0, width, height);
    context.restore();

    layer.invalid = false;
  });
}
function renderLayers (context, layers, invalidated) {
  // Loop through each layer and draw it to the canvas
  layers.forEach((layer, index) => {
    if (!layer.image) {
      return;
    }

    context.save();

    // Set the layer's canvas to the pixel coordinate system
    layer.canvas = context.canvas;
    setToPixelCoordinateSystem(layer, context);

    // Render into the layer's canvas
    const colormap = layer.viewport.colormap || layer.options.colormap;
    const labelmap = layer.viewport.labelmap;
    const isInvalid = layer.invalid || invalidated;

    if (colormap && colormap !== '' && labelmap === true) {
      addLabelMapLayer(layer, isInvalid);
    } else if (colormap && colormap !== '') {
      addPseudoColorLayer(layer, isInvalid);
    } else if (layer.image.color === true) {
      addColorLayer(layer, isInvalid);
    } else {
      // If this is the base layer, use the alpha channel for rendering of the grayscale image
      const useAlphaChannel = (index === 0);

      addGrayscaleLayer(layer, isInvalid, useAlphaChannel);
    }

    // Apply any global opacity settings that have been defined for this layer
    if (layer.options && layer.options.opacity) {
      context.globalAlpha = layer.options.opacity;
    } else {
      context.globalAlpha = 1;
    }

    if (layer.options && layer.options.fillStyle) {
      context.fillStyle = layer.options.fillStyle;
    }

    // Set the pixelReplication property before drawing from the layer into the
    // composite canvas
    context.imageSmoothingEnabled = !layer.viewport.pixelReplication;
    context.mozImageSmoothingEnabled = context.imageSmoothingEnabled;

    // Draw from the current layer's canvas onto the enabled element's canvas
    const sx = layer.viewport.displayedArea.tlhc.x - 1;
    const sy = layer.viewport.displayedArea.tlhc.y - 1;
    const width = layer.viewport.displayedArea.brhc.x - sx;
    const height = layer.viewport.displayedArea.brhc.y - sy;

    context.drawImage(layer.canvas, sx, sy, width, height, 0, 0, width, height);
    context.restore();

    layer.invalid = false;
  });
}
function renderLayers ( context , layers , invalidated ) { // Loop through each layer and draw it to the canvas layers . forEach ( ( layer , index ) => { if ( ! layer . image ) { return ; } context . save ( ) ; // Set the layer's canvas to the pixel coordinate system layer . canvas = context . canvas ; setToPixelCoordinateSystem ( layer , context ) ; // Render into the layer's canvas const colormap = layer . viewport . colormap || layer . options . colormap ; const labelmap = layer . viewport . labelmap ; const isInvalid = layer . invalid || invalidated ; if ( colormap && colormap !== '' && labelmap === true ) { addLabelMapLayer ( layer , isInvalid ) ; } else if ( colormap && colormap !== '' ) { addPseudoColorLayer ( layer , isInvalid ) ; } else if ( layer . image . color === true ) { addColorLayer ( layer , isInvalid ) ; } else { // If this is the base layer, use the alpha channel for rendering of the grayscale image const useAlphaChannel = ( index === 0 ) ; addGrayscaleLayer ( layer , isInvalid , useAlphaChannel ) ; } // Apply any global opacity settings that have been defined for this layer if ( layer . options && layer . options . opacity ) { context . globalAlpha = layer . options . opacity ; } else { context . globalAlpha = 1 ; } if ( layer . options && layer . options . fillStyle ) { context . fillStyle = layer . options . fillStyle ; } // Set the pixelReplication property before drawing from the layer into the // composite canvas context . imageSmoothingEnabled = ! layer . viewport . pixelReplication ; context . mozImageSmoothingEnabled = context . imageSmoothingEnabled ; // Draw from the current layer's canvas onto the enabled element's canvas const sx = layer . viewport . displayedArea . tlhc . x - 1 ; const sy = layer . viewport . displayedArea . tlhc . y - 1 ; const width = layer . viewport . displayedArea . brhc . x - sx ; const height = layer . viewport . displayedArea . brhc . y - sy ; context . drawImage ( layer . canvas , sx , sy , width , height , 0 , 0 , width , height ) ; context . restore ( ) ; layer . invalid = false ; } ) ; }
Internal function to render all layers for a Cornerstone enabled element

@param {CanvasRenderingContext2D} context Canvas context to draw upon
@param {EnabledElementLayer[]} layers The array of all layers for this enabled element
@param {Boolean} invalidated A boolean whether or not this image has been invalidated and must be redrawn
@returns {void}
@memberof Internal
Internal function to render all layers for a Cornerstone enabled element