Here I show how you can use mouseover, and mouseout functions to redraw the canvas over and over again, and infinite number of times. The trick is to minimize the mouseover and mouseout functions, and use the drawChildExtras function to do all the drawings. Also, the first four lines and the last line in the drawChildExtras function are required to make this work (thanks to Kevin Theisen for helping me with those).
Here is the canvas, and below is the annotated code.
And here is the code:
var tutorial3_testmol = new ChemDoodle.ViewerCanvas('tutorial3_testmol', 300, 300); tutorial3_testmol.specs.atoms_useJMOLColors = true; var caffeineMolFile = 'Molecule Name\n CHEMDOOD08070920033D 0 0.00000 0.00000 0\n[Insert Comment Here]\n 14 15 0 0 0 0 0 0 0 0 1 V2000\n -0.3318 2.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 1.0000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 0.5000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -1.1980 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 1.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 0.5342 -0.5000 0.0000 C 0 0 0 1 0 0 0 0 0 0 0 0\n -2.0640 -1.0000 0.0000 O 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -1.0000 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n 2.0640 -0.0000 0.0000 C 0 0 0 2 0 0 0 0 0 0 0 0\n 1.7910 1.7553 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1.4804 -0.8047 0.0000 N 0 0 0 1 0 0 0 0 0 0 0 0\n -0.3318 -2.0000 0.0000 C 0 0 0 4 0 0 0 0 0 0 0 0\n 1 2 2 0 0 0 0\n 3 2 1 0 0 0 0\n 4 2 1 0 0 0 0\n 3 5 1 0 0 0 0\n 3 6 1 0 0 0 0\n 7 4 1 0 0 0 0\n 4 8 2 0 0 0 0\n 9 5 2 0 0 0 0\n 10 5 1 0 0 0 0\n 10 8 1 0 0 0 0\n 7 11 1 0 0 0 0\n 7 12 1 0 0 0 0\n 13 8 1 0 0 0 0\n 13 11 2 0 0 0 0\n 10 14 1 0 0 0 0\nM END\n>\n07-08-2009\n'; var caffeine = ChemDoodle.readMOL(caffeineMolFile); // get the dimension of the molecule var size = caffeine.getDimension(); // find the scale by taking the minimum of the canvas/size ratios var scale = Math.min(tutorial3_testmol.width/size.x, tutorial3_testmol.height/size.y); // load the molecule first (this function automatically sets scale, so we need to change specs after) tutorial3_testmol.loadMolecule(caffeine); // change the specs.scale value to the scale calculated, shrinking it slightly so that text is not cut off tutorial3_testmol.specs.scale = scale*.8; //we are not showing atom numbers right away var showatomnumbers = false; tutorial3_testmol.mouseover = function(){ //set atom numbers to be displayed showatomnumbers = true; this.repaint(); } tutorial3_testmol.mouseout = function(){ //set atom numbers to be hidden showatomnumbers = false; this.repaint(); } tutorial3_testmol.drawChildExtras = function(ctx){ //four lines to make sure atom numbering, coordinates and scaling work correctly ctx.save(); ctx.translate(this.width/2, this.height/2); ctx.rotate(this.specs.rotateAngle); ctx.scale(this.specs.scale, this.specs.scale); ctx.translate(-this.width/2, -this.height/2); //set the font size relative to the scaling of the molecule ctx.font = 'bold ' + 2.5*scale + 'px sans-serif'; //center the atom numbers over the x,y coordinates of the atoms ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; //iterate through all atoms for (var i = 0, ii=caffeine.atoms.length; i<ii; i++) { var atom = caffeine.atoms[i]; if(showatomnumbers){ //draw a white circle behind the atom number ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(atom.x, atom.y, scale*1.8, 0, Math.PI*2, true); ctx.fill(); //draw the atom number in the color ctx.fillStyle = ChemDoodle.ELEMENT[atom.label].jmolColor; //the "+scale*0.7" is to adjust the text on the y-center of the atoms. ctx.fillText(i + 1, atom.x, atom.y); } } //restore the ctx settings so that application next time will start from scratch ctx.restore(); } tutorial3_testmol.repaint();