HTML5 Canvas: From Noob to Ninja - an interactive deep dive/

...

/

Using Objects

Using Objects

We'll cover the following...

What we’ve done with functions so far is nice and all, but for the purposes of this example, it doesn’t add a whole lot of value. We could have just stashed the contents of drawCircle into the for loop itself, and everything would have been just fine:

Press + to interact
for (var i = 0; i < 40; i++) {
  var r = Math.round(15 + Math.random() * 150);
 
  var xPos = Math.round(Math.random() * myCanvas.width);
  var yPos = Math.round(Math.random() * myCanvas.height);
 
  context.beginPath();
  context.arc(xPos, yPos, r, 0, 2 * Math.PI, true);
  context.fillStyle = "rgba(41, 170, 255, .1)";
  context.fill();
}

While I totally get the advantage functions bring to the table when it comes to code clarity and reuse, let’s go further.

For the ultimate level of control that leaves the functions-only approach in the dust, we can use objects. As you probably noticed by now, once things are drawn to the canvas, there really isn’t much you can do. You can’t access what you’ve just drawn as a single entity. It doesn’t matter if you are calling draw commands directly or relying on a custom function like we saw in the previous section. Once the ...