02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

Drawing out a grid in canvas

Although we don't have the time in this title to go over all the features available in canvas we will go ahead and jump right in deep by drawing out together a grid that will cover the full visible area on our stage. In the process we will learn about shapes, strokes, fills and arcs.

Keynotes:

  • Defining shapes/paths.
  • Creating a shape (arc).
  • Drawing with strokes and fills.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!

Browser support and canvas

Canvas is new and with it some older browsers will not support the full features. Although we won't worry about the overall experience of users that don't support canvas in this title, we want to show

06:55

Starting to draw in Canvas

Now that we know the users have canvas available on their browsers, it's time for us to pick the API we will be working with. We will pick the 2D api. Once we do so we will go ahead and pick a color a

07:56

Drawing out a grid in canvas

Although we don't have the time in this title to go over all the features available in canvas we will go ahead and jump right in deep by drawing out together a grid that will cover the full visible ar

08:55

Animating canvas

Although there is much more to cover in canvas (don't forget to check out my title dedicated fully to canvas), We are ready to wrap things up by creating an animation in canvas.

04:07