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>
