Tutorial > Periodic Table Canvas

The PeriodicTableCanvas class allows for the creation of an interactive component that displays the periodic table of elements. This can be used as a standalone component, or integrated with an application when an element chooser is needed.

The PeriodicTableCanvas constructor takes only a name and a dimension. The name is the element id of the generated <canvas>. The cellDimension parameter is an integer value for the width and height of each cell in the periodic table.

new ChemDoodle.PeriodicTableCanvas(name, cellDimension);

The <canvas> dimensions do not need to be defined as they are intrinsically defined by the cell size: the width is 18 times the cell dimension while the height is 10 times the cell dimension. An additional 5 pixels is added as padding to all sides.

By default, this component registers a mousemove listener that keeps track of the periodic table cell that the mouse pointer is currently over. At any time, the cell's corresponding Element object can be retrieved with the PeriodicTableCanvas.getHoveredElement() function. If no cell is currently hovered, then null is returned. The Element object is from the ChemDoodle.ELEMENT array.

The default graphics will adhere to the Canvas's Styles object. To customize the graphics completely, the PeriodicTableCanvas has a drawCell() function that controls the rendering of the cells. This function takes three parameters, as shown by the following code, a 2D <canvas> context, a Styles object and a PeriodicCell object. The PeriodicCell object has 4 attributes:

• element - The Element object.
• x - The x coordinate of the top-left corner of the cell.
• y - The y coordinate of the top-left corner of the cell.
• dimension - The width and height of the square cell.

Just override this drawCell() function to change the cell rendering:

let periodicTable = new ChemDoodle.PeriodicTableCanvas('pt', 20);
periodicTable.drawCell = function(ctx, specs, cell){
  // draw the cell here based on the cell attributes
}

Examples

A standard PeriodicTableCanvas canvas:

<script>
  new ChemDoodle.PeriodicTableCanvas('pt', 20);
</script>

Overriding the drawCell() function to render a black and white periodic table:

<script>
  let periodicTable = new ChemDoodle.PeriodicTableCanvas('pt', 20);
  periodicTable.drawCell = function(ctx, specs, cell){
    //if hovered, then show a red background
    if(this.hovered==cell){
      ctx.fillStyle='#c10000';
      ctx.fillRect(cell.x, cell.y, cell.dimension, cell.dimension);
    }
    //draw the main cells
    ctx.strokeStyle='black';
    ctx.strokeRect(cell.x, cell.y, cell.dimension, cell.dimension);
    ctx.font = '12px Sans-serif';
    ctx.fillStyle='black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(cell.element.symbol, cell.x+cell.dimension/2, cell.y+cell.dimension/2);
  }
  periodicTable.repaint();
</script>

Implementing a click listener to display information on the selected element:

<script>
  let periodicTable = new ChemDoodle.PeriodicTableCanvas('pt', 20);
  periodicTable.click = function(evt){
    if(this.hovered!=null){
      let e = this.getHoveredElement();
      let sb = [];
      sb.push('Element: '+e.name+'\n');
      sb.push('Symbol: '+e.symbol+'\n');
      sb.push('Atomic Number: '+e.atomicNumber+'\n');
      sb.push('Covalent Radius: '+e.covalentRadius+'\u212B\n');
      sb.push('vdW Radius: '+e.vdWRadius+'\u212B\n');
      alert(sb.join(''));
    }
  }
  periodicTable.repaint();
</script>