- [Instructor] So now that we've seen how to draw arch's…we'll turn our attention to creating more…general paths.…As I said earlier, a path consists…of a series of connected points.…To draw a path you start with the begin path function…and then perform some drawing operations.…Path's can be opened or closed,…and in this case we'll start with an open path.…So lets open up the paths_start file…and I've already setup some drawing properties…for this canvas.…So, lets add some code to draw our first path.…
So, I'll write ctx.beginPath, which is how we open the path.…Then I'm going to perform some drawing operations,…so I'll move the pen.…And I'll move the pen to a point on the canvas…and then I'll just draw some lines.…So I'll use lineTo to do that.…And I'll draw my first line.…And then I'll just copy that…and draw my second line.…
Then we'll draw one more line.…Then I'll call stroke.…That will actually draw the line itself.…So, let's go ahead and save and let's just look…at what we have in the browser right now.…So, I'll bring the paths start up.…
- Canvas examples
- Drawing shapes, arcs, paths, and curves
- Drawing text
- Drawing shadows, patterns, and gradients
- Using clipping paths
- Displaying images and video
- Transforming objects with scaling and rotation
- Manipulating raw pixels
- Applying transitions
- Creating animations
Skill Level Intermediate
1. Overview of Canvas
2. Basic Canvas Drawing Techniques
3. Complex Canvas Drawing
4. Advanced Drawing APIs
5. Practical Examples
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.