Learning the Canvas: Part 1

First we start by creating the canvas element, with an ID, width and height attributes, and a border so it’s easier to see.

<div>
  <canvas id="canvas" width="200" height="200" style="border: 1px solid black">
  </canvas>
</div>

Then we add the JavaScript code to draw a simple shape onto the canvas. We’ll choose (0,0) as the starting point and stretch it out half the width and half the height of the canvas.

<script>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "rgb(0, 0, 125)";
  context.fillRect(0, 0, 100, 100);
</script>

The result is a square that occupies one quarter of the total area of the canvas.

Next we can extend the same idea by drawing more shapes onto the canvas to form a pattern.

<script>
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "rgb(0, 0, 125)";
  context.fillRect(0, 0, 100, 100);
  context.fillStyle = "rgb(125, 0, 0)";
  context.fillRect(0, 100, 100, 200);
  context.fillStyle = "rgb(125, 0, 0)";
  context.fillRect(100, 0, 200, 100);
  context.fillStyle = "rgb(0, 0, 125)";
  context.fillRect(100, 100, 200, 200);
</script>

Now this is great, but it’s a lot of repetition. It would be great if we could leverage a bit of JavaScript’s dynamic nature to make this easier.

<script>
  var canvas = document.getElementById("canvas-3");
  var context = canvas.getContext("2d");
  for (var index = 0; index < 8; index += 1) {
    if (index % 2 == 0) {
      context.fillStyle = "rgb(255, 255, 255)";
    } else {
      context.fillStyle = "rgb(0, 0, 0)";
    }
    context.fillRect(0+100*index, 0, 100+100*index, 100);
  }
</script>

You can see how powerful this is and how it’s starting to resemble a game board that might look familiar.