Seasonal Savings: 20% off selected memberships for a limited time. Give now

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

Defining lines and strokes

From: EaselJS First Look

Video: Defining lines and strokes

Working with strokes is similar to working with fills. We have the option of creating solid as well as linear or radial gradient strokes. We also have the option to control the thickness of the stroke, as well as the shape of the corners and endpoints. In this video, I'm also to show you how to draw different types of line segments. I am starting off with a basic HTML template and I've done a little bit more set up in my JavaScript file. I've already set up the Canvas and Stage, plus added the shape to the stage and updated the stage.

Defining lines and strokes

Working with strokes is similar to working with fills. We have the option of creating solid as well as linear or radial gradient strokes. We also have the option to control the thickness of the stroke, as well as the shape of the corners and endpoints. In this video, I'm also to show you how to draw different types of line segments. I am starting off with a basic HTML template and I've done a little bit more set up in my JavaScript file. I've already set up the Canvas and Stage, plus added the shape to the stage and updated the stage.

If you have got questions about how this works, make sure you watch the video on understanding basic fills and colors. So when drawing line segments, we first need to define the color of the stroke as well as its style. The stroke style is going to take one to four values. If we just include one value, it defines the thickness of the stroke. We will make our stroke 10 pixels wide. So once we have a basic color and a stroke style, we are ready to draw line segments. To create a line segment, we need to first move the position of our stroke to its starting position.

We will do that with the moveTo method. Once we set up the starting position of our line, we could make a line to another point by using the lineTo method. So I am going to save this and let's take a look at our line. Beautiful! To make a line to another point in the Canvas, we can use additional lineTo commands. I'll save that, refresh and now we have two line segments. We can leave the path open like this or close it if we want to. If you want to close the path, you don't have to make another line to the beginning, you can simply use the closePath method.

That will automatically close the shape. Let's take a look at the type of strokes that we can do. I have already shown you how to do a simple stroke color, but you can also do linear or radial gradients. This is a lot like linear and gradient fills, so if you already have experience of those, this will be pretty easy. Colors is a list of colors inside brackets and separated by commas like an array. Ratios is the beginning and ending position of the gradient within the shape as a number from zero to one, where zero is the beginning of the shape and one is the end; .5 would then be in the middle of the shape.

Then you can specify two sets of X and Y coordinates; first, for where the gradient begins and then where it ends. So let's take a look at an example. So we will modify this stroke to be a linear gradient stroke and we will start setting up our colors. We will just make this go from yellow to red. Then we will set up the starting and ending positions relative to shape, this would just go from the beginning to the end. Then we can set up two sets of X and Y coordinates for where the gradient will begin and where it will end.

This is relative to the canvas. So we will do 50, 50, that's pretty much at the top of this triangle right here. And then we will go down to 250, 250 and that'll be this point in the triangle. So we will save it, hit Refresh, now you can see that the gradient is going from this position to this position. Radial gradients are pretty similar to linear gradients except that you're using the shape of two circles and blending in between those two circles to specify the colors.

But first you begin with a list of colors just like with linear gradients then a list of ratios just like with linear gradients, but you then specify an X and Y position for your first circle, and then a radius for your first circle, and then you specify an X and Y position for your second circle, and then a radius for that. EaselJS is going to blend between those two circles. So let's take a look at how that works. We will change this to be a radial gradient stroke, we will leave the colors alone and the positions as well.

Now we need to specify the X and Y positions plus the radii of two circles. So you usually make the X and Y positions of the circles the same. So we will make them both 50 and 250 and we will give this first circle a radius of 0, and then we will make the second circle be at the same position, 50 and 250. And we will give it a radius of 250. 50 and 250 is at this point right here, so I am going to save this and refresh, and you can see that now the gradient starts from right here and it goes out towards the edges.

So EaselJS is going to give us a few options for modifying how our strokes look. In addition to the thickness, you can specify how the line endings will get drawn as well as the points. SetStrokeStyle will take more than just the thickness, it can also take a value for the caps which can be butt or the number 0, round or the number 1, or square or the number 2. So you can either use the numbers or the names. The joints are where two lines meet, you can make that miter, round or bevel, again the numbers at 0, 1, or 2, where zero is the default and if you set a joint to miter, then the miter value is a number that specifies where the miter will be clipped.

So let's take a look at how that works. Before we modify the stroke style, we need to go ahead and leave the path open. So let me go ahead and delete this line right here that closes the path and then I will save and refresh, so we have now an open path. So then we can modify the shape of the endpoints by typing a different value right here. So we will specify round edges on the corners of the shapes. So when I do that, you see now that this shape has round edges at the ending of the line segments.

You can control the shape of where the segment meets by adding in another value right here. And now this has a round joint. Remember, you can also use numbers instead of these names, so this is the same thing. There are some other options for drawing curves to points. You don't have to use lineTo. You can use quadric curves and Bezier curves. So let's go ahead and draw a quadratic line to our second point. So instead of lineTo, we are going to use a quadraticCurve and give it four values.

So this is going to create a line that's a little bit curved to this point. A quadraticCurve is really just two sets of coordinates one of which controls the curvature that defines our line. You can play around with some of the other ways of drawing and take a look at the EaselJS documentation for different ways of drawing lines. You're probably going to end up drawing things in other programs and importing them when your lines get a little bit complicated. So EaselJS gives you a lot of options for drawing different lines, as well as ways to control the color or gradients used to display those lines.

Show transcript

This video is part of

Image for EaselJS First Look
EaselJS First Look

21 video lessons · 5051 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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.