Drawing on canvas with a mouse
We have all the ingredients already to create a canvas on which we can draw with our mouse. Let's walk you through it. We'll start by setting up the canvas:
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="color" id="bgColor" />
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 700;
canvas.height = 700;
</script>
</body>
</html>
In our script element, we are going to add a method for when the window has loaded. When the window has loaded, we need to add some event listeners:
window.onload = init; // add this line to the start of the script
function init() {
canvas.addEventListener...
