Uploaded July 2020 | Updated September 2026, 1 hour ago

---

This is a tutorial for building a tile based image in HTML Canvas. We cover painting with the mouse, clearing the canvas, and exporting the result to a png. You can use these concepts to dynamically place tiles in any HTML app or game!

💬 Join our Discord community of people making video games:
discord.gg/umD2GRy

⭐️ Get early access to my full JS Game Dev course:
drew-conley-courses.kit.com/66eb6d3ff4

Here's the code for this demo:
codepen.io/punkydrewster713/pen/QWymBGy

Here's the previous video for more detail on drawing images to HTML Canvas:
youtu.be/jEUuM5bRAzw

Twitter:
twitter.com/drewconley13