Revision 0.5, Breaking out the functions.

The Image

The HTML file

<canvas></canvas>
<script src="code/step05.js"></script>
<script> 
DoIt();
</script>

step05.js

"use strict"

let cycle = 0;
let cx, img;
let spriteW = 24, spriteH = 30;

function DoIt() {
  cx = document.querySelector("canvas").getContext("2d");
  img = document.createElement("img");
  img.src = "img/player.png";
  img.addEventListener("load",SetTimer);
}

function SetTimer() {
   setInterval( DrawFunc , 120);
}

function DrawFunc() {
  cx.clearRect(0, 0, spriteW, spriteH);
  cx.drawImage(img,
      // source rectangle
      cycle * spriteW, 0, spriteW, spriteH,
      // destination rectangle
      0,               0, spriteW, spriteH);
  cycle = (cycle + 1) % 8;
}