Starting at Square One: Creating a Checkerboard through Canvas and Javascript

4 min readAug 31, 2020

In my first week of learning of Javascript at Flatiron School, I became interested in learning how to dynamically render images on the browser. While researching how programmers display and manipulate images, I came across the HTML <canvas> element and the possibilities it holds for creatively working with images.

What is Canvas?

Canvas is simply a tag that you can place in the body of the HTML document. It is a container for graphics that you may want to display, draw, or animate through Javascript.

index.html<body>
  <canvas></canvas>
</body>

Viewing the Canvas

To actually see the canvas on your browser without inspecting the window, you can place a border around the canvas:

canvas.csscanvas {
  border: 1px solid violet;
}

With no further styling, the canvas will show up as a long rectangle in the top left corner of your screen.

Adjusting the Size of the Canvas

There are two main ways to adjust the size of the canvas. You can set the width and height through either CSS or Javascript. One advantage of adjusting it through Javascript is that if you want to size the canvas to the size of the entire window, you can run the following code:

canvas.jsconst canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

This will lead to the canvas to take up the entire browser window, with the exception of a small margin on the left side. To eliminate the margin, you can set the margin to 0 in your CSS:

canvas.cssbody {
   margin: 0;
}

Now the canvas will take up your entire window.

Creating and Drawing Shapes on the Canvas

To draw an object in the canvas, create a 2-D context, which comes along with its own collections of unique properties and methods. These allow you to style the borders of different shapes, fill them with color, and other functionalities. (For a list of all the methods, see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).

canvas.js// Create 2-dimensional context
const c = canvas.getContext('2d')// Make a teal-colored rectanglec.fillStyle = 'rgba(0,255,255, 1.0)'
c.fillRect(0, 0, 100, 100)// Make a pink rectanglec.fillStyle = 'rgba(255,105,180, 1.0)'
c.fillRect(100, 100, 100, 100)

This code above will produce the following images in the browser:

The first property .fillStyle accepts color values such as ‘orange’, ‘#FFA500’, ‘rgb(255, 165, 0)’, or ‘rgba(255, 165, 0, 1)’. Once you set the fillStyle, this color will be default color for all successive shapes until you reassign the property.

The method .fillRect(x, y, width, height) accepts four arguments: the x-coordinate of the starting point, the y-axis coordinate of the starting point, the rectangle’s width, and the rectangle’s height. The teal rectangle starts at coordinates (0, 0), or the top left corner of the browser window, and it extends 100 px to the right (its width), and 100 px down (its length). In contrast, the pink rectangles begins at coordinates (100, 100) with the same width and height.

Multiple Shapes

To create multiple rectangles, it would be fruitful at this point to form a Rectangle object that then can be reproduced or reinstantiated. It will take in arguments for x-coordinate starting point, y-coordinate starting point, height, and color. It also contains a method for drawing, or creating, the rectangle. This can look like the following:

function Rectangle(x, y, width, height, color){  this.x = x
  this.y = y
  this.width = width
  this.height = height
  this.color = color  this.draw = function(){
  c.fillStyle = this.color
  c.fillRect(this.x, this.y, this.width, this.height)
  }
}

At this point, you can create a loop that will create multiple instances of the rectangle:

// Make teal rectangles at 200 px intervals
for (let i = 0; i < canvas.width; i += 200){
  for(let j = 0; j < canvas.height; j += 200){
      let rectangle = new Rectangle(i, j, 100, 100, 'rgba(0,255,255,        
           1.0)')
  rectangle.draw()
  }
}// Make pink rectangles at 200 px intervalsfor (let i = 100; i < canvas.width; i += 200){
  for(let j = 100; j < canvas.height; j += 200){
     let rectangle = new Rectangle(i, j, 100, 100,'rgba(255,105,180, 1.0)')
   rectangle.draw()
  }
}

This will produce the following checkerboard image:

In these first few days of learning about canvas, I have a couple of takeaways:

) Creating a Javascript object for a shape allows for easier duplication and manipulation of images
) It is helpful to understand how coordinates work on the screen so that you can place objects on the screen accordingly.

I learned a lot from taking a few afternoons experimenting with canvas and Javascript, and I’m looking forward to learning more about its functionalities!

Sources:

Eloquent Javascript, Chapter 17: https://eloquentjavascript.net/17_canvas.html

HTML Canvas Tutorial for Beginners: https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL

MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle

W3Schools HTML Canvas Graphics: https://www.w3schools.com/html/html5_canvas.asp

Starting at Square One: Creating a Checkerboard through Canvas and Javascript

Written by Christina Sohn