HTML5 Game Development by Example : Beginner's Guide - Second Edition

Time for action – putting the circle drawing code into a function

Let's make a function to draw the circle and then draw some circles in the Canvas. We are going to put code in different files to make the code simpler:

1. Open the untangle.drawing.js file in our code editor and put in the following code:

   if (untangleGame === undefined) {
     var untangleGame = {};
   }
   
   untangleGame.drawCircle = function(x, y, radius) {
     var ctx = untangleGame.ctx;
     ctx.fillStyle = "GOLD";
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, Math.PI*2, true);
     ctx.closePath();
     ctx.fill();
   };

2. Open the untangle.data.js file and put the following code into it:

   if (untangleGame === undefined) { var untangleGame = {}; } untangleGame.createRandomCircles = function(width, height) { // randomly draw ...