Join Chris Converse for an in-depth discussion in this video Downloading and installing the Drawscript extension, part of Design the Web: From Illustrator to HTML5 Canvas.
Now to begin the project, let's come over to the desktop. Let's create a new folder. I'm going to call this myCanvas. I'm going to open this up, resize it, move it over to the right. With that created, let's go over to the exercise files. Let's open up HTML5 Canvas Script. I'm going to drag a copy of this HTML file into the new folder I created. Now this HTML file does have a Java script in place that's ready to receive code we get from Illustrator, but before we can generate canvas code from Illustrator, we need to download the plug-in. So let's go over to Drawscri.pt in your web browser, and from the home page, let's click on download Drawscript.
On this screen, click Download. Once this is complete, what you will get is a .zxp file, and when you double-click this file, this will automatically launch the Adobe Extension Manager for Creative Cloud. Now once the extension manager loads, you can come over here to the left-hand column, click on Illustrator. You should see the Drawscript plugin showing up here. Next, you want to come over here and check the box to enable this. Now when we launch Adobe Illustrator, this particular plug-in will then be activated. Now to check this, let's switch over to Adobe Illustrator. Inside of Illustrator, let's come up to the Window menu, come down to Extensions and you should see Drawscript.
So now with this extension properly installed. Now we are really to generate HTML5 Canvas elements from Illustrator.
Skill Level Beginner
<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; orphans: 2; widows: 2;">Q: <span style="font-family: tahoma, geneva, sans-serif;">I am on a MacBook Pro with Creative Cloud, and </span></span><span style="font-size: 13px; orphans: 2; widows: 2; font-family: tahoma, geneva, sans-serif;">I am unable to open the Drawscript extension. How do I access it?</span>
<span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; orphans: 2; widows: 2;">A: </span><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; orphans: 2; widows: 2;">You may need to download the Extension Manager for Creative Cloud (listed in the app listing).</span>