Introduction

In this chapter, we will learn how to draw rectangles, triangles, circles, ellipses, and custom shapes. Also, we will learn to fill gradients, translation, rotation, and scaling to be applied on these shapes.

The recipe structure will be a bit different in this chapter. We will have the JavaScript code in a separate file and this file will be embedded in the HTML code at run-time. In the previous chapter, the complete recipe was in a single file (.html file). However, in this chapter, a single recipe will comprise two different files:

Also, the can (canvas) and ctx (context) objects are created within the init() function and the reference to ctx (context) is passed to the different functions called within init().