Drawing with Canvas

I'm using an MDN Web Docs tutorial as a guide to build a simple website to learn how to draw with the Canvas API. I've made an .html, a .css, and a .js file to create and control a canvas element. I plan to make this document to explain how I'm building it, as I am inspired to build it by the tutorial. (with my own flair, of course).

Setting Up

The HTML document doesn't need much more than a canvas element and JavaScript. The code below is just about the simplest amount of code to get started. Then, it's just a matter of drawing on it.

HTML


<canvas id="draw_pad"></canvas>
<script src="script.js"></script>


script.js


const canvas = document.getElementById("draw_pad");
const ctx = canvas.getContext("2d");

// drawing code here

Drawing objects