Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Drawing with other graphic primitives

From: EaselJS First Look

Video: Drawing with other graphic primitives

EaselJS has methods for drawing rectangles just like Canvas, as well as methods that make it easier to draw things like circles, rounded rectangles or polygons and stars. So let's take a look. I am starting off with a basic HTML template, so if you haven't already, make sure you watch the video on creating a template and installing JS. I have done a lot more prep on my JavaScript file, so I have already set up my canvas and stage variables. I have also set up some basic strokes for the graphics we are going to create. So make sure you watch the movie on defining lines and strokes.

Drawing with other graphic primitives

EaselJS has methods for drawing rectangles just like Canvas, as well as methods that make it easier to draw things like circles, rounded rectangles or polygons and stars. So let's take a look. I am starting off with a basic HTML template, so if you haven't already, make sure you watch the video on creating a template and installing JS. I have done a lot more prep on my JavaScript file, so I have already set up my canvas and stage variables. I have also set up some basic strokes for the graphics we are going to create. So make sure you watch the movie on defining lines and strokes.

EaselJS gives you two methods for creating rectangles; you can create regular rectangles or rectangles with rounded edges. For all rectangles, you specify the beginning X and Y positions as well as a width and a height. For round rectangles, you can either specify a radius for all borders with the drawRoundRect method, or the radius of each edge with the method called drawRoundRectComplex, so let's take a look at a few examples. First, we will draw a simple rectangle. We could use the drawRect method or its clone which is just the Rect method, they are exactly the same.

So the first two points are the X and Y point of origin which is right here. And the next two points are the X and Y ending points which are right here. So if we want to draw a round rectangle, we need to use the drawRoundRect method. We will have to put in an additional value for the roundness of the round edges. So we will put in the value of 50 and then refresh and you can see that all the edges are now a lot smoother. So for more complex round rectangles, you can specify each corner radius separately.

And we'll save that, refresh, you can see that each corner is set differently. So these methods are really big timesavers of how you would do this if you were using regular canvas. There are also a few methods for making circles and arcs. They all take a single point of origin and with drawCircle you include a radius that is the distance from this origin to draw the graphic. Ellipses are more like rectangles, they take a width and a height instead of a radius. Arcs are how you would build a circle with regular canvas, it works pretty much like its canvas cousin, specify a point of origin, then a radius for this circle and then you create a beginning angle position.

Angles start to the right of the origin at position zero and go clockwise from the starting angle position to the ending angle position. You can reverse the direction of the arc, but this is not as clear as you may think. So we are going to have to take a look at some examples to make sure we understand this. One more thing, the angles are in radiance, so if we want to specify degrees we are going to need to convert. So let's take a look. So drawing a circle is pretty easy, you use the drawCircle method and you specify a point of origin as well as a radius.

So ellipses are like a combination between a circle and a rectangle. They get a point of origin and a width and height that determines the radii of the ellipse. Arcs are probably the hardest to understand and that's because it's actually a copy of the arc command from Canvas. You usually use the arc command to create ellipses and other shapes. That's why this method is not often used with EaselJS. So we usually start with a point of origin and then a radius like a circle. We are going to specify two angles, the beginning and ending angle, and the angles are going to be in radiance.

So let me just show you an example. The first is the point of origin, then a radius like a circle, then we are going to specify two angles; the beginning and ending angle. The angles are in radiance so if you need to convert them to degrees, you are going to have to use Math.PI/180 as a multiplier. Angle 0 is going to be to the right of the point of origin. And the default direction is clockwise. This may not be what you expected. Since the default direction of the arc is clockwise, if we want the direction to go the other way, you might be thinking you could type in a negative value for the second angle.

So I will save this and reload and now it's going all around in a clockwise direction instead of going from here to here, which may be what you wanted. In order to change the direction, you are going to need to add an additional value, the scarily named anti-clockwise Boolean. So I'll add a number 1 right here and then hit Save and Refresh, and now our angle goes in a counterclockwise direction. You rarely end up drawing arcs since the primary reason to do so is to draw circles and ellipses and EaselJS provides two super simple methods for that.

So let's say you need a polygon like a triangle or a pentagon, or you need to draw some stars or starbursts, enter the very handy PolyStar method. This is similar to drawing a circle. We start off with the origin and then the radius plus the number of sides you need for the shape. The pointiness is a value from 0 to 1, where 0 draws regular polygons, 1 draws spikes and anything in between draws starbursts. This is going to clear up when we do an example. Finally, the angle is a starting position of the first point or corner.

This is a little hard to see especially with a complex starbursts. So let's check out some examples. So I am going to save this and refresh. And we probably want to change the StrokeStyle to be round at the corners and the edges. So save that, refresh and there you go. So the first three values are pretty easy to visualize, the X and Y position of our poly shape. The next value is going to be the number of sides. So the first three values are pretty easy to visualize, think of them as the X and Y position of a circle and then a radius.

The next value is the number of sides, in this case 5. So let's make this more of a starburst by adding more points. To understand the next value, it's good to think of a starburst as being two circles, one for the inside spikes and one for the outside spikes. At a pointiness value of 1, the inner circle is smack in the origin of the graphic and becomes super spiky. So let's modify this value of pointiness to 1, save it and refresh. You can see that this is pretty much a bunch of spikes.

If we make his value zero, then the inside circle is the same size as the outer circle. And it's no longer a starburst. Save it and refresh and now you can see that it's a polygon. So the last value is the angle position of the first point. It's really tough to see with so many points. So let's go ahead and make this a triangle, save it and refresh, and you can see now that it's pointing to the right. This is sort of a weird position for a polygon so if you want to make sure it points up, then just change the angle to -90.

And it's kind of nice that it's also in degrees. Now you can see the polygon is pointing up. So EaselJS gives you a lot of methods for drawing graphics that are going to save you a lot of time when building common objects.

Show transcript

This video is part of

Image for EaselJS First Look
EaselJS First Look

21 video lessons · 4842 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed EaselJS First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.