Drawing a shape

Now that we have the context of our canvas element, we can draw graphics on it. Opa and JavaScript use similar code to draw the graphics. The primary difference between them is that the drawing functions in Opa are static. All drawing methods can be found in the Canvas module.

Using the fill and stroke properties

Whenever we wish to draw shapes on a canvas, there are two properties that we need to set: Stroke and Fill. Stroke and fill determine how the shape is drawn. The stroke property is used for the outline of a shape; the fill property is used for the inside of a shape. In the following example, the first two lines fill a rectangle, whereas the last three lines stroke a rectangle:

Canvas.save(ctx)
Canvas.set_fill_style(ctx,{color: Color.red})
Canvas.fill_rect(ctx,10,10,100,50)
Canvas.set_stroke_style(ctx,{color: Color.black})
Canvas.set_line_width(ctx,5.0)
Canvas.stroke_rect(ctx,120,10,100,50)
Canvas.restore(ctx)

Following is the result of the preceding code fragment:

Note...