Creating, Saving, and Loading Tracks - HTML5 Games Most Wanted - page 77

context.restore();
}
The first difference is the radius in the draw function. We need to calculate it so we can draw a proper circle.
The radius is half the brick size. After calculating, we do the same context.save() , context.translate() ,
and context.restore() magic we know from the square brick. Only this time, we use a path to draw the
brick; so, the context.beginPath() and context.closePath() commands shouldn't catch you by surprise.
For the path itself, we use the context.arc() function to draw a circle. After closing the path, we fill it with
the black fill color. And that's it. We are finished with our second brick, the circle!
Curve
The curve brick is our first asymmetric brick, so we must take the rotation into account when we draw the
brick. But before we look into that issue, let's create a new curve.js file inside the bricks folder and add
the proper <script> tag to our HTML. The following code is also nothing new to you:
var Curve = function() {
this.row = 0;
this.column = 0;
this.type = "Curve";
this.rotation = 0;
}
But now let's draw that little piece correctly on the canvas.
Curve.prototype.draw = function(context) {
context.save();
context.translate(this.column * BRICK_SIZE, this.row * BRICK_SIZE);
context.translate(BRICK_SIZE / 2, BRICK_SIZE / 2);
context.rotate(this.rotation * Math.PI / 180);
context.translate(- BRICK_SIZE / 2, - BRICK_SIZE / 2);
context.beginPath();
context.fillColor = 0;
context.moveTo(0, 0);
context.bezierCurveTo(BRICK_SIZE / 2, 0, BRICK_SIZE, BRICK_SIZE / 2, BRICK_SIZE,
BRICK_SIZE);
context.lineTo(0, BRICK_SIZE);
context.closePath();
context.fill();
context.restore();
}