Tutorial > Hyperlink Canvas

The functional HyperlinkCanvas class provide a mechanism for interacting with visitors in a very common way: through pointing and clicking. In essence, they are customizable buttons with molecules drawn on them. They provide visual feedback when the mouse hovers over them. When clicked, they will open new websites, or execute any JavaScript functions bound to them.

Most importantly, as with all canvases, they are extendable and easily altered. If you want a user to see a specific mouse over visual effect, just plug it in. If you want to incorporate clickable canvases into a web app you are making, then HyperlinkCanvas components are a perfect choice. The constructor for a HyperlinkCanvas can take between 4-6 parameters. The first four are requred. The last two are optional and specify the color and width of the rectangle highlight that is drawn by default when a user mouses over the canvas.

new ChemDoodle.HyperlinkCanvas(name, width, height, urlOrFunction[, highlightColor[, highlightWidth]]);

The urlOrFunction parameter can either be a string or a function as you will see in the examples below. If it is a string, the canvas will act as a HTML hyperlink and redirect the user to the url specified. If it is a function, then upon clicking, that function will be executed.

Examples

Here is a plain example that just opens a link. Set the HyperlinkCanvas.openInNewWindow variable to true to open the link in a new window:

<script>
  let hyperlink1 = new ChemDoodle.HyperlinkCanvas('hyperlink1', 100, 100, 'https://www.ichemlabs.com', '#33FF71');
  hyperlink1.openInNewWindow = true;
  let pyridineMolFile = 'Molecule Name\n  CHEMDOOD08260921043D 0   0.00000     0.00000     0\n[Insert Comment Here]\n  6  6  0  0  0  0  0  0  0  0  1 V2000\n    0.0000    1.0000    0.0000 N   0  0  0  1  0  0  0  0  0  0  0  0\n   -0.8660    0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n   -0.8660   -0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.0000   -1.0000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660   -0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660    0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\nM  END';
  let pyridine = ChemDoodle.readMOL(pyridineMolFile);
  hyperlink1.loadMolecule(pyridine);
</script>

This example displays an image on hover and launches a function when clicked:

<script>
  let hyperlink2 = new ChemDoodle.HyperlinkCanvas('hyperlink2', 100, 100, function(){alert('Hi, I\'m Linus Pauling! You can use these Hyperlink objects to link to other pages or activate functions.');});
  hyperlink2.setHoverImage('/img/cwc/backgrounds/linusPauling.png');
  let pyridineMolFile = 'Molecule Name\n  CHEMDOOD08260921043D 0   0.00000     0.00000     0\n[Insert Comment Here]\n  6  6  0  0  0  0  0  0  0  0  1 V2000\n    0.0000    1.0000    0.0000 N   0  0  0  1  0  0  0  0  0  0  0  0\n   -0.8660    0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n   -0.8660   -0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.0000   -1.0000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660   -0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660    0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\nM  END';
  let pyridine = ChemDoodle.readMOL(pyridineMolFile);
  hyperlink2.loadMolecule(pyridine);
</script>

This example overrides the hover painting function to draw a smiley face when hovered:

<script>
  let hyperlink3 = new ChemDoodle.HyperlinkCanvas('hyperlink3', 100, 100, function(){alert('Don\'t the ChemDoodle Web Components make you smile?');});
  // Override drawChildExtras() to hijack the hover painting function
  hyperlink3.drawChildExtras = function(ctx){
    //check to make sure the canvas is hovered by testing if e!=null
    if(hyperlink3.e!=null){
      // fill outer circle with yellow
      ctx.fillStyle = "yellow";
      ctx.beginPath();
      ctx.arc(50,50,50,0,Math.PI*2,true);
      ctx.fill();
      // draw smiley
      ctx.strokeStyle = "blue";
      ctx.lineWidth = "2";
      ctx.beginPath();
      ctx.arc(50,50,50,0,Math.PI*2,true); // Outer circle
      ctx.moveTo(85,50);
      ctx.arc(50,50,35,0,Math.PI,false);  // Mouth (clockwise)
      ctx.moveTo(40,40);
      ctx.arc(35,40,5,0,Math.PI*2,true);  // Left eye
      ctx.moveTo(70,40);
      ctx.arc(65,40,5,0,Math.PI*2,true);  // Right eye
      ctx.stroke();
    }
  }
  let pyridineMolFile = 'Molecule Name\n  CHEMDOOD08260921043D 0   0.00000     0.00000     0\n[Insert Comment Here]\n  6  6  0  0  0  0  0  0  0  0  1 V2000\n    0.0000    1.0000    0.0000 N   0  0  0  1  0  0  0  0  0  0  0  0\n   -0.8660    0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n   -0.8660   -0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.0000   -1.0000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660   -0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n    0.8660    0.5000    0.0000 C   0  0  0  2  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n  4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\nM  END';
  let pyridine = ChemDoodle.readMOL(pyridineMolFile);
  hyperlink3.loadMolecule(pyridine);
</script>