Setup a Canvas Starter Boilerplate

How to start from scratch on CodePen or use a boilerplate.

Throughout the game development series, I will use a simple boilerplate, but you can use whatever setup you prefer. The projects we’re building don’t depend heavily on a complex boilerplate, meaning your setup can be as simple or complex as you like.

Here you can find steps to get up and running quickly via CodePen or from the starter repository provided. Either one works fine, but the boilerplate will likely become more complex and break over time as the series goes on. By creating a CodePen template you’ll learn how to set everything up on your own and have a simple structure.

CodePen

1. Create a free account on CodePen
2. Create a new Pen
3. Add the following HTML, CSS, and JavaScript code:

codepen files

HTML

<h1>Canvas Template</h1>
<div id="gameContainer">
  <canvas
     id="gameCanvas"
     width="600"
     height="600"
  />
</div>

CSS (optional)

h1 {
  text-align: center;
}
#gameContainer {}
body {
  background: #111;
  color: #f8f8f8;
}
canvas {
  background: #f8f8f8;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 1rem;
  display: block;
}

JS (optional)

;(function () {
  console.log('IIFE JS Loaded!')
})()

4. At the top right click the settings button

5. Configure CSS (optional)

optional CSS settings — add normalize, autoprefixer

6. Configure JavaScript (add Babel as Preprocessor)

JavaScript Settings — add babel

7. Save this as a template (optional)

change regular pen to template

8. If you made this a template, save the pen, go back to the homepage, and create a new pen from template

create from template

Boilerplate

You can find up-to-date setup instructions on the GitHub repository. If you have any questions, just ask.

CodeDraken/canvas-game-dev-boilerplate

I recommend you get a fresh copy of the boilerplate from the GitHub repository each time you start a new project following the series, as there will be updates and changes to it over time.

TLDR; Setup Instructions:

1. Install NodeJS
2. Download the repository
3. Run npm install
4. Start developing with npm start

Back to the Index Page