Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <p>Press any letter</p>
<div class="wrapper">
<canvas id="myCanvas" width="400" height="400"></canvas>
</div>

              
            
!

CSS

              
                .wrapper{
	width: 400px;
	height: 400px;
	margin: 0 auto;
}
p{
  margin-top:5px;
	text-align: center;
	 font-family: Helvetica, Arial, sans-serif;
}
              
            
!

JS

              
                
var jsonobj={A:[{x:144,y:115},{x:235,y:115},{x:279,y:252},{x:295,y:252},{x:295,y:283},{x:199,y:283},{x:199,y:252},{x:222,y:252},{x:191,y:156},{x:176,y:207},{x:208,y:207},{x:227,y:236},{x:167,y:236},{x:163,y:252},{x:181,y:252},{x:181,y:283},{x:104,y:283},{x:104,y:252},{x:120,y:252},{x:154,y:146},{x:143,y:146}],B:[{x:123,y:115},{x:216,y:115},{x:249,y:194,c1x:283,c1y:113,c2x:287,c2y:179},{x:216,y:284,c1x:307,c1y:214,c2x:286,c2y:290},{x:180,y:284},{x:180,y:253},{x:209,y:253},{x:205,y:210,c1x:232,c1y:252,c2x:232,c2y:211},{x:180,y:210},{x:187,y:183},{x:205,y:183},{x:205,y:147,c1x:226,c1y:183,c2x:222,c2y:147},{x:187,y:147},{x:187,y:284},{x:123,y:284},{x:123,y:253},{x:137,y:253},{x:137,y:253},{x:137,y:146},{x:123,y:146}],C:[{x:275,y:115},{x:237,y:115},{x:232,y:129},{x:193,y:112,c1x:223,c1y:118,c2x:213,c2y:112},{x:121,y:200,c1x:163,c1y:112,c2x:121,c2y:146},{x:206,y:288,c1x:121,c1y:255,c2x:153,c2y:288},{x:279,y:255,c1x:238,c1y:288,c2x:259,c2y:275},{x:251,y:224},{x:213,y:247,c1x:238,c1y:237,c2x:230,c2y:248},{x:177,y:200,c1x:191,c1y:248,c2x:177,c2y:228},{x:206,y:153,c1x:177,c1y:173,c2x:190,c2y:153},{x:232,y:183,c1x:221,c1y:153,c2x:232,c2y:166},{x:275,y:183}],D:[{x:118,y:115},{x:195,y:115},{x:285,y:196,c1x:253,c1y:115,c2x:285,c2y:154},{x:195,y:284,c1x:284,c1y:245,c2x:258,c2y:284},{x:174,y:284},{x:174,y:252},{x:195,y:252},{x:195,y:147,c1x:241,c1y:252,c2x:241,c2y:147},{x:184,y:147},{x:184,y:284},{x:119,y:284},{x:117,y:252},{x:134,y:252},{x:134,y:147},{x:119,y:147}],E:[{x:127,y:149},{x:142,y:149},{x:142,y:254},{x:127,y:254},{x:127,y:286},{x:273,y:286},{x:273,y:231},{x:231,y:231},{x:231,y:254},{x:192,y:254},{x:192,y:214},{x:238,y:214},{x:238,y:182},{x:192,y:182},{x:192,y:149},{x:231,y:149},{x:231,y:170},{x:273,y:170},{x:273,y:117},{x:127,y:117}],F:[{x:129,y:149},{x:144,y:149},{x:144,y:254},{x:129,y:254},{x:129,y:286},{x:219,y:286},{x:219,y:254},{x:194,y:254},{x:194,y:223},{x:240,y:223},{x:240,y:191},{x:194,y:191},{x:194,y:149},{x:231,y:149},{x:231,y:170},{x:274,y:170},{x:274,y:117},{x:129,y:117}],G:[{x:232,y:286},{x:281,y:286},{x:281,y:226},{x:290,y:226},{x:290,y:200},{x:210,y:200},{x:210,y:226},{x:225,y:226},{x:225,y:236},{c1x:223,c1y:239,c2x:220,c2y:242,x:217,y:244},{c1x:214,c1y:246,c2x:208,c2y:248,x:201,y:248},{c1x:196,c1y:248,c2x:191,c2y:246,x:187,y:244},{c1x:183,c1y:242,c2x:180,c2y:238,x:177,y:234},{c1x:174,c1y:230,c2x:172,c2y:226,x:170,y:220},{c1x:169,c1y:215,c2x:168,c2y:209,x:168,y:203},{c1x:168,c1y:197,c2x:169,c2y:191,x:171,y:186},{c1x:172,c1y:180,c2x:175,c2y:175,x:177,y:171},{c1x:180,c1y:167,c2x:184,c2y:164,x:188,y:161},{c1x:192,c1y:159,c2x:197,c2y:157,x:201,y:157},{c1x:205,c1y:157,c2x:208,c2y:158,x:212,y:160},{c1x:215,c1y:161,c2x:218,c2y:163,x:220,y:165},{c1x:223,c1y:168,c2x:225,c2y:171,x:227,y:175},{c1x:228,c1y:179,c2x:229,c2y:183,x:229,y:188},{x:272,y:188},{x:272,y:117},{x:236,y:117},{x:231,y:134},{c1x:230,c1y:133,c2x:229,c2y:132,x:227,y:129},{c1x:225,c1y:127,c2x:223,c2y:125,x:219,y:123},{c1x:216,c1y:120,c2x:211,c2y:118,x:206,y:117},{c1x:200,c1y:115,c2x:193,c2y:114,x:184,y:114},{c1x:175,c1y:114,c2x:165,c2y:116,x:156,y:120},{c1x:148,c1y:125,c2x:140,c2y:131,x:133,y:139},{c1x:126,c1y:147,c2x:120,c2y:156,x:116,y:167},{c1x:112,c1y:178,c2x:110,c2y:190,x:110,y:203},{c1x:110,c1y:216,c2x:112,c2y:228,x:116,y:238},{c1x:120,c1y:249,c2x:125,c2y:258,x:132,y:265},{c1x:139,c1y:273,c2x:147,c2y:278,x:156,y:282},{c1x:165,c1y:286,c2x:175,c2y:288,x:186,y:288},{c1x:195,c1y:288,c2x:203,c2y:286,x:210,y:283},{c1x:217,c1y:279,c2x:222,c2y:275,x:225,y:271}],H:[{x:113,y:149},{x:126,y:149},{x:126,y:254},{x:113,y:254},{x:113,y:286},{x:192,y:286},{x:192,y:254},{x:177,y:254},{x:177,y:218},{x:223,y:218},{x:223,y:254},{x:208,y:254},{x:208,y:286},{x:287,y:286},{x:287,y:254},{x:273,y:254},{x:273,y:149},{x:287,y:149},{x:287,y:117},{x:208,y:117},{x:208,y:149},{x:223,y:149},{x:223,y:185},{x:177,y:185},{x:177,y:149},{x:192,y:149},{x:192,y:117},{x:113,y:117}],I:[{x:160,y:149},{x:175,y:149},{x:175,y:254},{x:160,y:254},{x:160,y:286},{x:240,y:286},{x:240,y:254},{x:225,y:254},{x:225,y:149},{x:240,y:149},{x:240,y:117},{x:160,y:117}],J:[{x:149,y:332},{c1x:151,c1y:333,c2x:153,c2y:333,x:155,y:334},{c1x:157,c1y:334,c2x:159,c2y:334,x:162,y:334},{c1x:174,c1y:334,c2x:185,c2y:333,x:193,y:330},{c1x:202,c1y:327,c2x:209,c2y:323,x:215,y:317},{c1x:220,c1y:311,c2x:224,c2y:304,x:226,y:296},{c1x:229,c1y:287,c2x:230,c2y:278,x:230,y:267},{x:230,y:148},{x:250,y:148},{x:250,y:116},{x:159,y:116},{x:159,y:148},{x:180,y:148},{x:180,y:267},{c1x:180,c1y:280,c2x:178,c2y:289,x:174,y:294},{c1x:171,c1y:299,c2x:166,c2y:302,x:160,y:302},{c1x:156,c1y:302,c2x:152,c2y:301,x:149,y:300}],K:[{x:184,y:117},{x:107,y:117},{x:107,y:148},{x:121,y:148},{x:121,y:255},{x:107,y:255},{x:107,y:286},{x:184,y:286},{x:184,y:255},{x:171,y:255},{x:171,y:229},{x:189,y:213},{x:215,y:255},{x:198,y:255},{x:198,y:286},{x:293,y:286},{x:293,y:255},{x:279,y:255},{x:230,y:178},{x:265,y:148},{x:279,y:148},{x:279,y:117},{x:198,y:117},{x:198,y:148},{x:216,y:148},{x:171,y:188},{x:171,y:148},{x:184,y:148}],L:[{x:132,y:149},{x:146,y:149},{x:146,y:254},{x:132,y:254},{x:132,y:286},{x:268,y:286},{x:268,y:223},{x:227,y:223},{x:227,y:254},{x:196,y:254},{x:196,y:149},{x:209,y:149},{x:209,y:117},{x:132,y:117}],M:[{x:253,y:159},{x:253,y:255},{x:239,y:255},{x:239,y:286},{x:316,y:286},{x:316,y:255},{x:303,y:255},{x:303,y:148},{x:316,y:148},{x:316,y:117},{x:224,y:117},{x:200,y:207},{x:176,y:117},{x:84,y:117},{x:84,y:148},{x:97,y:148},{x:97,y:255},{x:84,y:255},{x:84,y:286},{x:150,y:286},{x:150,y:255},{x:136,y:255},{x:136,y:159},{x:169,y:286},{x:220,y:286}],N:[{x:293,y:117},{x:220,y:117},{x:220,y:148},{x:237,y:148},{x:237,y:206},{x:177,y:117},{x:108,y:117},{x:108,y:148},{x:122,y:148},{x:122,y:255},{x:107,y:255},{x:107,y:286},{x:182,y:286},{x:182,y:255},{x:163,y:255},{x:163,y:194},{x:225,y:286},{x:277,y:286},{x:277,y:148},{x:293,y:148}],O:[{x:237,y:283},{c1x:248,c1y:279,c2x:257,c2y:273,x:264,y:266},{c1x:271,c1y:258,c2x:277,c2y:249,x:280,y:238},{c1x:284,c1y:227,c2x:286,c2y:215,x:286,y:201},{c1x:286,c1y:188,c2x:284,c2y:175,x:281,y:164},{c1x:277,c1y:153,c2x:272,c2y:144,x:265,y:136},{c1x:258,c1y:128,c2x:249,c2y:122,x:238,y:118},{c1x:227,c1y:113,c2x:214,c2y:111,x:199,y:111},{c1x:186,c1y:111,c2x:175,c2y:113,x:165,y:118},{c1x:154,c1y:122,c2x:145,c2y:128,x:138,y:136},{c1x:130,c1y:144,c2x:124,c2y:153,x:120,y:164},{c1x:116,c1y:175,c2x:114,c2y:187,x:114,y:200},{c1x:114,c1y:215,c2x:116,c2y:228,x:121,y:239},{c1x:125,c1y:250,c2x:131,c2y:260,x:138,y:267},{c1x:146,c1y:275,c2x:155,c2y:280,x:166,y:284},{c1x:177,c1y:287,c2x:188,c2y:289,x:201,y:289},{c1x:214,c1y:289,c2x:227,c2y:287,x:237,y:283},{x:237,y:260},{x:190,y:248},{c1x:187,c1y:245,c2x:184,c2y:242,x:181,y:237},{c1x:179,c1y:233,c2x:177,c2y:227,x:176,y:221},{c1x:175,c1y:215,c2x:174,c2y:207,x:174,y:200},{c1x:174,c1y:192,c2x:174,c2y:185,x:176,y:179},{c1x:177,c1y:173,c2x:179,c2y:167,x:181,y:163},{c1x:183,c1y:158,c2x:186,c2y:155,x:189,y:152},{c1x:191,c1y:150,c2x:195,c2y:149,x:199,y:149},{c1x:203,c1y:149,c2x:207,c2y:150,x:211,y:153},{c1x:214,c1y:155,c2x:217,c2y:159,x:219,y:164},{c1x:221,c1y:169,c2x:223,c2y:174,x:224,y:181},{c1x:225,c1y:187,c2x:225,c2y:194,x:225,y:201},{c1x:225,c1y:209,c2x:225,c2y:216,x:224,y:222},{c1x:223,c1y:228,c2x:221,c2y:233,x:219,y:238},{c1x:217,c1y:242,c2x:214,c2y:245,x:211,y:248},{c1x:208,c1y:250,c2x:205,c2y:251,x:201,y:251},{c1x:197,c1y:251,c2x:193,c2y:250,x:190,y:248}],P:[{x:129,y:149},{x:142,y:149},{x:142,y:254},{x:129,y:254},{x:129,y:286},{x:207,y:286},{x:207,y:254},{x:192,y:254},{x:192,y:217},{x:210,y:217},{c1x:219,c1y:217,c2x:227,c2y:216,x:235,y:214},{c1x:242,c1y:212,c2x:249,c2y:209,x:255,y:205},{c1x:261,c1y:201,c2x:265,c2y:196,x:269,y:190},{c1x:272,c1y:184,c2x:274,c2y:177,x:274,y:169},{c1x:274,c1y:162,c2x:273,c2y:155,x:271,y:149},{c1x:270,c1y:143,c2x:266,c2y:137,x:261,y:132},{c1x:257,c1y:128,c2x:250,c2y:124,x:241,y:121},{c1x:232,c1y:118,c2x:221,c2y:117,x:207,y:117},{x:129,y:117},{x:129,y:149},{x:204,y:148},{c1x:211,c1y:148,c2x:216,c2y:150,x:220,y:154},{c1x:224,c1y:158,c2x:226,c2y:163,x:226,y:170},{c1x:226,c1y:177,c2x:224,c2y:182,x:220,y:185},{c1x:215,c1y:189,c2x:210,c2y:190,x:203,y:190},{x:192,y:190},{x:192,y:148},{x:204,y:148}],Q:[{x:214,y:284},{c1x:215,c1y:287,c2x:217,c2y:290,x:219,y:294},{c1x:221,c1y:297,c2x:224,c2y:300,x:227,y:302},{c1x:230,c1y:305,c2x:234,c2y:307,x:238,y:308},{c1x:242,c1y:310,c2x:246,c2y:310,x:251,y:310},{c1x:257,c1y:310,c2x:263,c2y:309,x:267,y:307},{c1x:272,c1y:305,c2x:276,c2y:303,x:279,y:299},{c1x:282,c1y:296,c2x:284,c2y:292,x:285,y:287},{c1x:287,c1y:282,c2x:288,c2y:277,x:288,y:272},{x:288,y:259},{x:272,y:259},{x:272,y:266},{c1x:272,c1y:268,c2x:271,c2y:271,x:271,y:273},{c1x:270,c1y:276,c2x:269,c2y:277,x:267,y:277},{c1x:264,c1y:277,c2x:262,c2y:276,x:260,y:272},{c1x:258,c1y:269,c2x:257,c2y:265,x:256,y:262},{c1x:270,c1y:247,c2x:276,c2y:227,x:276,y:201},{c1x:276,c1y:188,c2x:275,c2y:176,x:271,y:166},{c1x:268,c1y:155,c2x:263,c2y:146,x:256,y:139},{c1x:249,c1y:131,c2x:241,c2y:125,x:230,y:121},{c1x:220,c1y:117,c2x:208,c2y:115,x:194,y:115},{c1x:181,c1y:115,c2x:170,c2y:117,x:160,y:121},{c1x:150,c1y:125,c2x:142,c2y:131,x:135,y:139},{c1x:127,c1y:146,c2x:122,c2y:155,x:118,y:165},{c1x:114,c1y:176,c2x:112,c2y:187,x:112,y:199},{c1x:112,c1y:214,c2x:114,c2y:226,x:118,y:237},{c1x:122,c1y:247,c2x:128,c2y:256,x:135,y:264},{c1x:143,c1y:271,c2x:151,c2y:276,x:161,y:280},{c1x:172,c1y:283,c2x:183,c2y:285,x:195,y:285},{c1x:202,c1y:285,c2x:208,c2y:285,x:214,y:284},{x:214,y:284},{x:177,y:205},{c1x:173,c1y:207,c2x:169,c2y:210,x:166,y:213},{c1x:166,c1y:209,c2x:166,c2y:204,x:166,y:199},{c1x:166,c1y:192,c2x:166,c2y:186,x:168,y:180},{c1x:169,c1y:174,c2x:171,c2y:169,x:174,y:164},{c1x:176,c1y:160,c2x:179,c2y:157,x:183,y:154},{c1x:186,c1y:152,c2x:189,c2y:150,x:193,y:150},{c1x:198,c1y:150,c2x:202,c2y:152,x:205,y:154},{c1x:209,c1y:157,c2x:212,c2y:161,x:215,y:165},{c1x:217,c1y:170,c2x:219,c2y:175,x:221,y:181},{c1x:222,c1y:188,c2x:223,c2y:194,x:223,y:201},{c1x:223,c1y:203,c2x:223,c2y:204,x:223,y:206},{c1x:222,c1y:208,c2x:222,c2y:209,x:222,y:210},{c1x:218,c1y:208,c2x:214,c2y:205,x:210,y:204},{c1x:205,c1y:202,c2x:200,c2y:201,x:195,y:201},{c1x:188,c1y:201,c2x:182,c2y:202,x:177,y:205},{x:179,y:241},{c1x:181,c1y:236,c2x:183,c2y:232,x:185,y:228},{c1x:188,c1y:225,c2x:191,c2y:223,x:195,y:223},{c1x:199,c1y:223,c2x:202,c2y:225,x:204,y:229},{c1x:206,c1y:232,c2x:207,c2y:237,x:208,y:243},{c1x:204,c1y:247,c2x:200,c2y:249,x:195,y:249},{c1x:189,c1y:249,c2x:184,c2y:246,x:179,y:241},{x:179,y:241}],R:[{x:117,y:148},{x:130,y:148},{x:130,y:253},{x:117,y:253},{x:117,y:285},{x:195,y:285},{x:195,y:253},{x:180,y:253},{x:180,y:216},{c1x:186,c1y:216,c2x:190,c2y:216,x:193,y:217},{c1x:196,c1y:218,c2x:199,c2y:219,x:200,y:221},{c1x:202,c1y:223,c2x:203,c2y:226,x:204,y:229},{c1x:204,c1y:233,c2x:204,c2y:237,x:204,y:243},{c1x:204,c1y:257,c2x:208,c2y:268,x:216,y:276},{c1x:224,c1y:284,c2x:235,c2y:288,x:251,y:288},{c1x:258,c1y:288,c2x:264,c2y:287,x:268,y:285},{c1x:273,c1y:282,c2x:277,c2y:280,x:279,y:276},{c1x:282,c1y:272,c2x:284,c2y:268,x:285,y:264},{c1x:286,c1y:259,c2x:287,c2y:254,x:287,y:249},{x:287,y:236},{x:271,y:236},{x:271,y:244},{c1x:271,c1y:249,c2x:269,c2y:252,x:265,y:252},{c1x:263,c1y:252,c2x:261,c2y:250,x:260,y:247},{c1x:260,c1y:244,c2x:259,c2y:240,x:259,y:235},{c1x:259,c1y:231,c2x:258,c2y:227,x:257,y:223},{c1x:255,c1y:219,c2x:252,c2y:215,x:249,y:212},{c1x:247,c1y:209,c2x:243,c2y:207,x:239,y:205},{c1x:236,c1y:203,c2x:232,c2y:201,x:227,y:201},{c1x:232,c1y:200,c2x:237,c2y:199,x:241,y:197},{c1x:246,c1y:195,c2x:249,c2y:192,x:253,y:189},{c1x:256,c1y:186,c2x:258,c2y:183,x:260,y:179},{c1x:262,c1y:175,c2x:263,c2y:170,x:263,y:166},{c1x:263,c1y:159,c2x:262,c2y:152,x:260,y:146},{c1x:258,c1y:140,c2x:255,c2y:135,x:250,y:130},{c1x:245,c1y:126,c2x:238,c2y:122,x:230,y:120},{c1x:221,c1y:117,c2x:210,c2y:116,x:196,y:116},{x:117,y:116},{x:117,y:148},{x:192,y:147},{c1x:199,c1y:147,c2x:205,c2y:149,x:209,y:153},{c1x:213,c1y:156,c2x:214,c2y:162,x:214,y:169},{c1x:214,c1y:175,c2x:212,c2y:180,x:208,y:183},{c1x:204,c1y:187,c2x:198,c2y:188,x:191,y:188},{x:180,y:188},{x:180,y:147},{x:192,y:147}],S:[{x:162,y:286},{x:165,y:267},{c1x:167,c1y:270,c2x:170,c2y:273,x:174,y:275},{c1x:177,c1y:278,c2x:181,c2y:281,x:185,y:283},{c1x:189,c1y:285,c2x:194,c2y:286,x:199,y:288},{c1x:204,c1y:289,c2x:210,c2y:290,x:216,y:290},{c1x:223,c1y:290,c2x:230,c2y:289,x:238,y:287},{c1x:246,c1y:285,c2x:252,c2y:282,x:259,y:278},{c1x:265,c1y:274,c2x:270,c2y:269,x:274,y:262},{c1x:278,c1y:256,c2x:280,c2y:248,x:280,y:238},{c1x:280,c1y:229,c2x:277,c2y:221,x:273,y:215},{c1x:268,c1y:208,c2x:262,c2y:203,x:255,y:199},{c1x:248,c1y:195,c2x:240,c2y:191,x:232,y:188},{c1x:224,c1y:186,c2x:216,c2y:183,x:209,y:180},{c1x:202,c1y:178,c2x:196,c2y:175,x:191,y:173},{c1x:186,c1y:170,c2x:184,c2y:167,x:184,y:162},{c1x:184,c1y:160,c2x:185,c2y:158,x:186,y:157},{c1x:187,c1y:155,c2x:188,c2y:154,x:190,y:153},{c1x:191,c1y:152,c2x:193,c2y:151,x:195,y:150},{c1x:197,c1y:150,c2x:199,c2y:150,x:201,y:150},{c1x:205,c1y:150,c2x:209,c2y:150,x:213,y:151},{c1x:216,c1y:153,c2x:220,c2y:154,x:223,y:157},{c1x:225,c1y:159,c2x:228,c2y:162,x:229,y:166},{c1x:231,c1y:169,c2x:232,c2y:173,x:232,y:178},{x:276,y:178},{x:276,y:117},{x:234,y:117},{x:231,y:137},{c1x:229,c1y:133,c2x:226,c2y:129,x:222,y:126},{c1x:219,c1y:123,c2x:215,c2y:120,x:210,y:118},{c1x:206,c1y:116,c2x:201,c2y:115,x:196,y:114},{c1x:191,c1y:113,c2x:186,c2y:112,x:181,y:112},{c1x:175,c1y:112,c2x:169,c2y:114,x:162,y:116},{c1x:155,c1y:118,c2x:149,c2y:121,x:143,y:125},{c1x:138,c1y:129,c2x:133,c2y:135,x:129,y:141},{c1x:125,c1y:148,c2x:123,c2y:156,x:123,y:165},{c1x:123,c1y:175,c2x:126,c2y:183,x:130,y:190},{c1x:135,c1y:197,c2x:141,c2y:202,x:147,y:207},{c1x:154,c1y:211,c2x:162,c2y:214,x:170,y:217},{c1x:178,c1y:219,c2x:185,c2y:222,x:192,y:224},{c1x:199,c1y:226,c2x:205,c2y:227,x:209,y:229},{c1x:214,c1y:232,c2x:216,c2y:234,x:216,y:237},{c1x:216,c1y:240,c2x:216,c2y:242,x:214,y:243},{c1x:213,c1y:245,c2x:211,c2y:246,x:209,y:247},{c1x:207,c1y:248,c2x:205,c2y:248,x:202,y:249},{c1x:200,c1y:249,c2x:198,c2y:249,x:196,y:249},{c1x:193,c1y:249,c2x:190,c2y:249,x:187,y:248},{c1x:183,c1y:248,c2x:180,c2y:246,x:177,y:245},{c1x:174,c1y:243,c2x:171,c2y:240,x:169,y:237},{c1x:166,c1y:234,c2x:165,c2y:230,x:165,y:225},{x:120,y:225},{x:120,y:286}],T:[{x:119,y:117},{x:119,y:180},{x:154,y:180},{x:154,y:149},{x:175,y:149},{x:175,y:254},{x:155,y:254},{x:155,y:286},{x:245,y:286},{x:245,y:254},{x:225,y:254},{x:225,y:149},{x:246,y:149},{x:246,y:180},{x:281,y:180},{x:281,y:117}],U:[{x:114,y:146},{x:128,y:146},{x:128,y:206},{c1x:128,c1y:234,c2x:134,c2y:254,x:147,y:267},{c1x:160,c1y:280,c2x:178,c2y:287,x:203,y:288},{c1x:226,c1y:288,c2x:243,c2y:281,x:255,y:268},{c1x:267,c1y:255,c2x:272,c2y:234,x:272,y:205},{x:272,y:146},{x:286,y:146},{x:286,y:115},{x:214,y:115},{x:214,y:147},{x:227,y:147},{x:227,y:198},{c1x:227,c1y:209,c2x:226,c2y:217,x:225,y:223},{c1x:224,c1y:229,c2x:223,c2y:234,x:220,y:237},{c1x:218,c1y:241,c2x:216,c2y:243,x:213,y:244},{c1x:210,c1y:245,c2x:206,c2y:246,x:203,y:246},{c1x:199,c1y:246,c2x:195,c2y:245,x:192,y:244},{c1x:189,c1y:242,c2x:187,c2y:240,x:185,y:236},{c1x:183,c1y:233,c2x:181,c2y:228,x:180,y:222},{c1x:179,c1y:216,c2x:178,c2y:208,x:178,y:198},{x:178,y:146},{x:191,y:146},{x:191,y:115},{x:114,y:115}],V:[{x:208,y:232},{x:180,y:148},{x:193,y:148},{x:193,y:117},{x:104,y:117},{x:104,y:148},{x:117,y:148},{x:181,y:286},{x:226,y:286},{x:284,y:148},{x:296,y:148},{x:296,y:117},{x:227,y:117},{x:227,y:148},{x:240,y:148},{x:218,y:201}],W:[{x:155,y:231},{x:141,y:148},{x:155,y:148},{x:155,y:117},{x:75,y:117},{x:75,y:148},{x:88,y:148},{x:120,y:286},{x:176,y:286},{x:191,y:228},{x:198,y:198},{x:219,y:286},{x:276,y:286},{x:312,y:148},{x:325,y:148},{x:325,y:117},{x:256,y:117},{x:256,y:148},{x:269,y:148},{x:261,y:185},{x:253,y:231},{x:230,y:117},{x:180,y:117},{x:168,y:171}],X:[{x:185,y:254},{x:164,y:254},{x:189,y:222},{x:212,y:254},{x:198,y:254},{x:198,y:285},{x:295,y:285},{x:295,y:254},{x:281,y:254},{x:237,y:194},{x:274,y:147},{x:295,y:147},{x:295,y:116},{x:214,y:116},{x:214,y:147},{x:235,y:147},{x:211,y:179},{x:187,y:147},{x:201,y:147},{x:201,y:116},{x:105,y:116},{x:105,y:147},{x:118,y:147},{x:162,y:208},{x:126,y:254},{x:105,y:254},{x:105,y:285},{x:185,y:285}],Y:[{x:208,y:193},{c1x:208,c1y:192,c2x:208,c2y:191,x:207,y:189},{c1x:206,c1y:187,c2x:206,c2y:185,x:205,y:183},{c1x:204,c1y:181,c2x:203,c2y:180,x:202,y:178},{c1x:202,c1y:176,c2x:201,c2y:175,x:201,y:173},{x:187,y:148},{x:199,y:148},{x:199,y:117},{x:117,y:117},{x:117,y:148},{x:128,y:148},{x:175,y:226},{x:175,y:255},{x:162,y:255},{x:162,y:286},{x:239,y:286},{x:239,y:255},{x:226,y:255},{x:226,y:226},{x:270,y:148},{x:283,y:148},{x:283,y:117},{x:218,y:117},{x:218,y:148},{x:232,y:148},{x:218,y:172},{c1x:218,c1y:174,c2x:217,c2y:175,x:216,y:177},{c1x:215,c1y:179,c2x:214,c2y:181,x:213,y:183},{c1x:212,c1y:185,c2x:211,c2y:187,x:211,y:189},{c1x:210,c1y:190,c2x:209,c2y:192,x:209,y:193}],Z:[{x:162,y:180},{x:162,y:149},{x:208,y:149},{x:120,y:255},{x:120,y:286},{x:280,y:286},{x:280,y:223},{x:237,y:223},{x:237,y:254},{x:192,y:254},{x:280,y:149},{x:280,y:117},{x:121,y:117},{x:121,y:180}]}



var points=[],
	_letter='A',
  _letterarray = Object(),
  c=document.getElementById("myCanvas"),
  ctx=c.getContext("2d");
  
show();
function show () {

	points.length = 0;
	_letterarray = Object(jsonobj[_letter]);

	for (var i = 0; i < _letterarray.length; i++) {
		var p = {};
		if (_letterarray[i].c1x) {
			p = {x:200,y:200,c1x:200,c1y:200,c2x:200,c2y:200,bazier:true}
		}
		else{
			p={x:200,y:200,bazier:false}
		}
		points.push(p);
	};

	//TweenLite.ticker.addEventListener("tick", drawAllDots);
	window.requestAnimationFrame(drawAllDots); // new version
	animate();
};

function drawAllDots(){
	ctx.clearRect(0,0,400,400);
	ctx.beginPath();
	ctx.fillStyle = "rgba(252,60,14,1)";
	drawLetter(points);
  window.requestAnimationFrame(drawAllDots); // new version
};

function drawLetter (_points) {
	ctx.moveTo(_points[0].x,_points[0].y);
	for (var i = 1; i < _points.length; i++) {
		if(_points[i].bazier){
			ctx.bezierCurveTo(_points[i].c1x, _points[i].c1y, _points[i].c2x, _points[i].c2y, _points[i].x, _points[i].y);
		}
		else{
			ctx.lineTo(_points[i].x,_points[i].y);
		}
	};
	ctx.closePath();
	ctx.fill();
};

function animate () {

	for (var i = 0; i < _letterarray.length; i++) {
		var _t = Math.floor(Math.random()*10)/10+1;
		 if(_letterarray[i].c1x){
		 	TweenLite.to(points[i],_t,{x:_letterarray[i].x,y:_letterarray[i].y,c1x:_letterarray[i].c1x,c1y:_letterarray[i].c1y,c2x:_letterarray[i].c2x,c2y:_letterarray[i].c2y,ease:Elastic.easeOut});
		 }
		 else{
			TweenLite.to(points[i],_t,{x:_letterarray[i].x,y:_letterarray[i].y,ease:Elastic.easeOut});
			
		 }
				
	};
};




document.onkeypress = function(evt) {
     evt = (evt) ? evt : event;
       var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));

		if ((charCode > 64 &&  charCode < 91) || (charCode > 96 &&  charCode < 123)){
			  _letter=String.fromCharCode(charCode).toUpperCase();
			  show();
		};

};
              
            
!
999px

Console