Tutorial > Transform Canvas

The TransformerCanvas component allows your visitors to actually move, rotate and scale a molecule. Controls are as follows: rotate by clicking and dragging, translate by holding the alt key and clicking and dragging, scale using the mouse wheel. You will never have to wrestle with applets ever again!

Just like the RotatorCanvas constructor, the TransformerCanvas constructor has an optional boolean. If this boolean is set to true, then users can rotate the structure in 3 dimensions. If this boolean is false, then users can only rotate structures around the z-axis.

new ChemDoodle.TransformCanvas(name, width, height[, rotateIn3D]);

Examples

This example allows the user to manipulate a molecule in 3D using a "stick" representation:

<script>
  let transform = new ChemDoodle.TransformCanvas('transform1', 350, 200, true);
  transform.styles.atoms_useJMOLColors = true;
  transform.styles.bonds_splitColor = true;
  transform.styles.bonds_width_2D = 3;
  transform.styles.atoms_display = false;
  transform.styles.backgroundColor = 'black';
  transform.styles.bonds_clearOverlaps_2D = true;
  let exampleMolFile = 'Molecule from ChemDoodle Web Components\n  CHEMDOOD09200912563D 0   0.00000     0.00000     0\nhttps://www.ichemlabs.com\n143159  0  0  0  0  0  0  0  0  1 V2000\n    7.0719   -2.5140   -2.1887   P 0  0  0  1  0  0  0  0  0  0  0  0\n    7.6261   -2.8751   -3.1673   O 0  0  0  2  0  0  0  0  0  0  0  0\n    6.8896   -3.3511   -1.3702   O 0  0  0  2  0  0  0  0  0  0  0  0\n    5.9672   -1.9548   -2.5226   O 0  0  0  1  0  0  0  0  0  0  0  0\n    5.9787   -1.0952   -3.2982   C 0  0  0  3  0  0  0  0  0  0  0  0\n    4.8588   -0.6687   -3.3297   C 0  0  0  2  0  0  0  0  0  0  0  0\n    4.5707   -0.4674   -2.2421   O 0  0  0  1  0  0  0  0  0  0  0  0\n    4.0169   -1.4561   -3.7312   C 0  0  0  2  0  0  0  0  0  0  0  0\n    3.6079   -1.1882   -4.7812   O 0  0  0  1  0  0  0  0  0  0  0  0\n    3.2036   -1.5111   -2.8086   C 0  0  0  3  0  0  0  0  0  0  0  0\n    3.4337   -0.4676   -2.2255   C 0  0  0  2  0  0  0  0  0  0  0  0\n    3.1406   -0.4658   -1.0713   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.4718    0.3016   -0.6795   C 0  0  0  2  0  0  0  0  0  0  0  0\n    2.0473    0.9526   -1.2803   O 0  0  0  2  0  0  0  0  0  0  0  0\n    2.3230    0.3665    0.3983   N 0  0  0  2  0  0  0  0  0  0  0  0\n    2.7984   -0.3286    1.0966   C 0  0  0  2  0  0  0  0  0  0  0  0\n    2.6418   -0.1840    2.0592   O 0  0  0  2  0  0  0  0  0  0  0  0\n    3.4467   -1.1427    0.6859   C 0  0  0  2  0  0  0  0  0  0  0  0\n    3.9735   -1.9483    1.4138   C 0  0  0  4  0  0  0  0  0  0  0  0\n    3.6350   -1.1829   -0.4133   C 0  0  0  3  0  0  0  0  0  0  0  0\n    2.5985   -1.7895   -5.2921   P 0  0  0  1  0  0  0  0  0  0  0  0\n    2.6339   -1.6747   -6.4614   O 0  0  0  2  0  0  0  0  0  0  0  0\n    2.5062   -2.8925   -4.8821   O 0  0  0  2  0  0  0  0  0  0  0  0\n    1.6472   -1.0625   -4.8611   O 0  0  0  1  0  0  0  0  0  0  0  0\n    1.6316    0.0605   -5.1225   C 0  0  0  3  0  0  0  0  0  0  0  0\n    0.6421    0.5261   -4.6163   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.6979    0.3313   -3.4884   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.4205    0.0611   -4.9817   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -1.1529    0.8834   -5.3020   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.7717   -0.6094   -4.0175   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -0.3589    0.0888   -3.1179   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -0.2045   -0.5066   -2.0923   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.6184   -0.0964   -1.1664   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -1.1982    0.6960   -1.2185   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -0.3796   -0.5477   -0.2250   N 0  0  0  2  0  0  0  0  0  0  0  0\n    0.2423   -1.4123   -0.1841   C 0  0  0  2  0  0  0  0  0  0  0  0\n    0.4830   -1.8517    0.7807   N 0  0  0  3  0  0  0  0  0  0  0  0\n    0.6488   -1.8827   -1.1129   C 0  0  0  3  0  0  0  0  0  0  0  0\n    0.4176   -1.4045   -2.0914   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -2.1202    0.6268   -6.1059   P 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.3471    1.6331   -6.7000   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -1.8968   -0.3632   -6.7263   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -3.0963    0.3772   -5.3217   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -3.5307    1.2257   -4.6755   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -4.2723    0.7226   -3.8809   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -3.6236    0.1398   -3.1369   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -5.0743   -0.0989   -4.3085   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -6.0735   -0.0125   -3.7683   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -4.5155   -1.1495   -4.0554   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -4.1821   -0.8325   -2.9437   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -3.4419   -1.5881   -2.4247   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.7621   -2.3319   -2.8467   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -2.2269   -2.8749   -2.0916   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -2.5871   -2.4460   -1.1693   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -2.3082   -2.6874   -0.0898   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -1.6635   -3.3466    0.2495   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -2.8640   -2.0560    0.6116   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -3.5980   -1.2882    0.3640   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -4.0636   -0.7411    1.1802   N 0  0  0  3  0  0  0  0  0  0  0  0\n   -3.8537   -1.0579   -0.6400   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -3.3162   -1.6598   -1.3484   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.0565    0.5587   -4.3489   P 0  0  0  1  0  0  0  0  0  0  0  0\n   -6.6786    1.4724   -5.0013   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.6541   -0.2918   -4.9131   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.7045    1.0431   -3.3640   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -7.2737    1.9754   -2.8232   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -7.4238    1.8492   -1.6302   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -6.8328    0.9220   -1.3184   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -8.5545    1.6618   -1.2146   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -8.7982    2.2993   -0.2857   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -8.5740    0.4539   -1.0274   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -7.4595    0.3189   -0.5742   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.0601   -0.7911   -0.6832   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -6.7102   -1.3179    0.1996   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -6.7918   -0.8622    1.0660   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -6.2718   -2.2902    0.1037   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -6.1789   -2.7503   -0.8565   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -5.6859   -3.7188   -0.9565   N 0  0  0  3  0  0  0  0  0  0  0  0\n   -6.5471   -2.2444   -1.7740   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -6.9972   -1.2322   -1.6722   C 0  0  0  3  0  0  0  0  0  0  0  0\n  -10.0191    2.4772    0.0451   P 0  0  0  1  0  0  0  0  0  0  0  0\n  -10.1154    3.4864    0.6582   O 0  0  0  2  0  0  0  0  0  0  0  0\n  -10.6848    2.3727   -0.9237   O 0  0  0  2  0  0  0  0  0  0  0  0\n  -10.2838    1.5012    0.8292   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -9.9801    1.5440    1.9435   C 0  0  0  3  0  0  0  0  0  0  0  0\n  -10.2734    0.4715    2.4029   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -9.6941   -0.2921    1.7917   O 0  0  0  1  0  0  0  0  0  0  0  0\n  -11.4477    0.0987    2.3121   C 0  0  0  2  0  0  0  0  0  0  0  0\n  -12.0015    0.0697    3.3195   O 0  0  0  2  0  0  0  0  0  0  0  0\n  -11.3495   -1.0021    1.7753   C 0  0  0  3  0  0  0  0  0  0  0  0\n  -10.1949   -1.2850    2.0237   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -9.7538   -2.0437    1.2383   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -9.9025   -2.0538    0.1524   C 0  0  0  3  0  0  0  0  0  0  0  0\n   -9.3739   -2.8536   -0.3264   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -8.8709   -3.3560    0.4858   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -8.1620   -4.2550    0.4621   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.8509   -4.7816   -0.3093   O 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.8379   -4.5348    1.4730   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -8.1143   -4.0515    2.4074   C 0  0  0  2  0  0  0  0  0  0  0  0\n   -7.7313   -4.4884    3.3256   N 0  0  0  3  0  0  0  0  0  0  0  0\n   -8.7482   -3.1922    2.4306   N 0  0  0  2  0  0  0  0  0  0  0  0\n   -9.0883   -2.8911    1.4478   C 0  0  0  2  0  0  0  0  0  0  0  0\n   11.0059    1.8418    6.0605   P 0  0  0  1  0  0  0  0  0  0  0  0\n   12.0015    1.2269    6.2218   O 0  0  0  2  0  0  0  0  0  0  0  0\n   10.0975    1.6310    6.7842   O 0  0  0  2  0  0  0  0  0  0  0  0\n   10.6356    1.6264    4.8611   O 0  0  0  1  0  0  0  0  0  0  0  0\n   11.4169    1.5998    4.0229   C 0  0  0  3  0  0  0  0  0  0  0  0\n   10.7892    1.3892    3.0317   C 0  0  0  2  0  0  0  0  0  0  0  0\n    9.9439    2.1584    3.0501   O 0  0  0  1  0  0  0  0  0  0  0  0\n   10.2435    0.3014    2.9561   C 0  0  0  2  0  0  0  0  0  0  0  0\n   10.5940   -0.2968    2.0348   O 0  0  0  1  0  0  0  0  0  0  0  0\n    9.0588    0.5979    2.9849   C 0  0  0  3  0  0  0  0  0  0  0  0\n    9.0858    1.6927    2.4703   C 0  0  0  2  0  0  0  0  0  0  0  0\n    8.1395    2.3475    2.7617   N 0  0  0  1  0  0  0  0  0  0  0  0\n    7.7772    2.5975    3.7633   C 0  0  0  3  0  0  0  0  0  0  0  0\n    6.9464    3.2763    3.7499   N 0  0  0  2  0  0  0  0  0  0  0  0\n    6.7835    3.4639    2.6990   C 0  0  0  2  0  0  0  0  0  0  0  0\n    6.0439    4.1464    2.1531   C 0  0  0  2  0  0  0  0  0  0  0  0\n    5.3294    4.7816    2.6807   N 0  0  0  3  0  0  0  0  0  0  0  0\n    6.0995    4.1773    1.0897   N 0  0  0  2  0  0  0  0  0  0  0  0\n    6.8232    3.5772    0.5837   C 0  0  0  3  0  0  0  0  0  0  0  0\n    7.5510    2.9178    0.9951   N 0  0  0  2  0  0  0  0  0  0  0  0\n    7.4822    2.9035    2.0734   C 0  0  0  2  0  0  0  0  0  0  0  0\n   10.0557   -1.4119    1.7080   P 0  0  0  1  0  0  0  0  0  0  0  0\n   10.8023   -2.0311    1.0307   O 0  0  0  2  0  0  0  0  0  0  0  0\n    9.6207   -1.9812    2.6574   O 0  0  0  2  0  0  0  0  0  0  0  0\n    9.1069   -1.0164    0.9638   O 0  0  0  1  0  0  0  0  0  0  0  0\n    9.3461   -0.3695    0.0529   C 0  0  0  3  0  0  0  0  0  0  0  0\n    8.2727   -0.1802   -0.4396   C 0  0  0  2  0  0  0  0  0  0  0  0\n    7.6438    0.3981    0.3070   O 0  0  0  1  0  0  0  0  0  0  0  0\n    7.6472   -1.2030   -0.6341   C 0  0  0  2  0  0  0  0  0  0  0  0\n    7.7428   -1.5323   -1.7254   O 0  0  0  1  0  0  0  0  0  0  0  0\n    6.5132   -0.9354   -0.2453   C 0  0  0  3  0  0  0  0  0  0  0  0\n    6.5803    0.2698   -0.0515   C 0  0  0  2  0  0  0  0  0  0  0  0\n    5.9176    0.6730    0.8449   N 0  0  0  1  0  0  0  0  0  0  0  0\n    5.1656    1.4257    0.6412   C 0  0  0  2  0  0  0  0  0  0  0  0\n    5.0064    1.7283   -0.2858   O 0  0  0  2  0  0  0  0  0  0  0  0\n    4.6128    1.8478    1.4845   N 0  0  0  2  0  0  0  0  0  0  0  0\n    4.7743    1.5288    2.5200   C 0  0  0  2  0  0  0  0  0  0  0  0\n    4.2639    1.9840    3.2327   O 0  0  0  2  0  0  0  0  0  0  0  0\n    5.5224    0.7230    2.7124   C 0  0  0  2  0  0  0  0  0  0  0  0\n    5.7070    0.3069    3.8264   C 0  0  0  4  0  0  0  0  0  0  0  0\n    6.1035    0.3086    1.8546   C 0  0  0  3  0  0  0  0  0  0  0  0\n  1  2  1  0  0  0  0\n 21 23  1  0  0  0  0\n 21 22  1  0  0  0  0\n  1  3  1  0  0  0  0\n  1  4  1  0  0  0  0\n  9 21  1  0  0  0  0\n132  1  1  0  0  0  0\n 21 24  1  0  0  0  0\n  8  9  1  0  0  0  0\n  4  5  1  0  0  0  0\n  8 10  1  0  0  0  0\n  6  8  1  0  0  0  0\n  5  6  1  0  0  0  0\n131132  1  0  0  0  0\n 24 25  1  0  0  0  0\n124125  1  0  0  0  0\n  6  7  1  0  0  0  0\n 10 11  1  0  0  0  0\n131133  1  0  0  0  0\n 52 53  1  0  0  0  0\n129131  1  0  0  0  0\n 40 42  1  0  0  0  0\n124126  1  0  0  0  0\n124127  1  0  0  0  0\n 25 26  1  0  0  0  0\n127128  1  0  0  0  0\n  7 11  1  0  0  0  0\n128129  1  0  0  0  0\n 53 54  1  0  0  0  0\n 28 30  1  0  0  0  0\n 38 39  1  0  0  0  0\n 26 28  1  0  0  0  0\n111124  1  0  0  0  0\n 51 52  1  0  0  0  0\n 28 29  1  0  0  0  0\n 11 12  1  0  0  0  0\n 29 40  1  0  0  0  0\n133134  1  0  0  0  0\n 40 43  1  0  0  0  0\n 30 31  1  0  0  0  0\n 55 56  1  0  0  0  0\n 26 27  1  0  0  0  0\n 32 39  1  0  0  0  0\n129130  1  0  0  0  0\n 12 20  1  0  0  0  0\n 40 41  1  0  0  0  0\n 54 55  1  0  0  0  0\n 36 38  1  0  0  0  0\n 18 20  1  0  0  0  0\n 96 97  1  0  0  0  0\n 77 78  1  0  0  0  0\n 18 19  1  0  0  0  0\n 54 61  1  0  0  0  0\n 27 31  1  0  0  0  0\n 49 50  1  0  0  0  0\n 47 49  1  0  0  0  0\n 51 61  1  0  0  0  0\n 31 32  1  0  0  0  0\n 50 51  1  0  0  0  0\n130134  1  0  0  0  0\n 36 37  1  0  0  0  0\n110111  1  0  0  0  0\n 12 13  1  0  0  0  0\n 77 79  1  0  0  0  0\n 55 57  1  0  0  0  0\n 43 44  1  0  0  0  0\n 96 98  1  0  0  0  0\n 32 33  1  0  0  0  0\n134135  1  0  0  0  0\n 46 50  1  0  0  0  0\n 16 18  1  0  0  0  0\n 35 36  1  0  0  0  0\n 47 48  1  0  0  0  0\n 95 96  1  0  0  0  0\n 60 61  1  0  0  0  0\n 45 47  1  0  0  0  0\n 76 77  1  0  0  0  0\n 79 80  1  0  0  0  0\n 13 14  1  0  0  0  0\n 98 99  1  0  0  0  0\n 45 46  1  0  0  0  0\n 62 64  1  0  0  0  0\n 33 35  1  0  0  0  0\n 44 45  1  0  0  0  0\n110112  1  0  0  0  0\n 13 15  1  0  0  0  0\n135143  1  0  0  0  0\n 57 58  1  0  0  0  0\n108110  1  0  0  0  0\n 48 62  1  0  0  0  0\n 94 95  1  0  0  0  0\n 15 16  1  0  0  0  0\n 33 34  1  0  0  0  0\n 58 60  1  0  0  0  0\n135136  1  0  0  0  0\n 99100  1  0  0  0  0\n 16 17  1  0  0  0  0\n 62 63  1  0  0  0  0\n136137  1  0  0  0  0\n112113  1  0  0  0  0\n 95102  1  0  0  0  0\n 74 76  1  0  0  0  0\n141143  1  0  0  0  0\n 73 80  1  0  0  0  0\n 93 94  1  0  0  0  0\n107108  1  0  0  0  0\n 99101  1  0  0  0  0\n 62 65  1  0  0  0  0\n108109  1  0  0  0  0\n 58 59  1  0  0  0  0\n109113  1  0  0  0  0\n 73 74  1  0  0  0  0\n136138  1  0  0  0  0\n101102  1  0  0  0  0\n141142  1  0  0  0  0\n113114  1  0  0  0  0\n106107  1  0  0  0  0\n 92102  1  0  0  0  0\n139141  1  0  0  0  0\n 74 75  1  0  0  0  0\n 92 93  1  0  0  0  0\n 72 73  1  0  0  0  0\n138139  1  0  0  0  0\n121122  1  0  0  0  0\n122123  1  0  0  0  0\n 65 66  1  0  0  0  0\n114123  1  0  0  0  0\n103106  1  0  0  0  0\n103104  1  0  0  0  0\n 68 72  1  0  0  0  0\n114115  1  0  0  0  0\n139140  1  0  0  0  0\n 71 72  1  0  0  0  0\n 91 92  1  0  0  0  0\n120121  1  0  0  0  0\n 67 68  1  0  0  0  0\n117123  1  0  0  0  0\n 66 67  1  0  0  0  0\n103105  1  0  0  0  0\n 69 71  1  0  0  0  0\n115116  1  0  0  0  0\n 67 69  1  0  0  0  0\n 90 91  1  0  0  0  0\n116117  1  0  0  0  0\n118120  1  0  0  0  0\n 87 91  1  0  0  0  0\n117118  1  0  0  0  0\n 69 70  1  0  0  0  0\n 88 90  1  0  0  0  0\n118119  1  0  0  0  0\n 86 87  1  0  0  0  0\n 86 88  1  0  0  0  0\n 70 81  1  0  0  0  0\n 81 83  1  0  0  0  0\n 81 84  1  0  0  0  0\n 88 89  1  0  0  0  0\n 85 86  1  0  0  0  0\n 84 85  1  0  0  0  0\n 81 82  1  0  0  0  0\nM  END';
  let mol = ChemDoodle.readMOL(exampleMolFile);
  transform.loadMolecule(mol);
</script>

Get your work done with our popular desktop software.