JavaScript HTML Game Development Tutorial 1 – Setting Up HTML Canvas

Javascript Game Tutorial | part 1 | Canvas game tutorial | For beginners | JavaScript game engine tutorial

Welcome to the first JavaScript game development tutorial (HTML5 js canvas) for beginners! In this JavaScript game engine tutorial I will demonstrate one way of initializing canvas in JavaScript from scratch, which is the first step before we actually start drawing sprites and 2D tile worlds and making our own game engine.

[Russian/на русском языке] Как сделать игру на JavaScript? Этот урок программирования объяснит создание игры на JavaScript с нуля. Спрайт, анимация главного героя, РПГ, платформер движёк и графика и всё иное будет в этом туториал е объяснятся.

To start drawing game objects on the screen such as sprites, lines, rectangles and animations we first need to set up the canvas tag. This tutorial starts with a brief example of an HTML5 game made in canvas. And then in my next JavaScript game tutorial for beginners we’ll discover how to draw tiles and sprites.

Then it proceeds to minimum HTML and JavaScript coding required to draw to canvas. And no, we won’t be using enchant js here. Using rect method, the background is erased (cleared) to black color, concluding this canvas tutorial. The next tutorial will cover drawing 2d sprites on the canvas.

In a way, this is the very first step to developing a full fledged game engine in JavaScript. I’ll cover a few other subjects along the way that will prepare you for the future 😛

Support creation of my next tutorial on Patreon 🙂

For my gamedev news and updates please visit:

Ah, sometimes I do custom portrait drawings, thought I’d add it here for search engine optimizations, since this is the most visited video on my YouTube channel: Custom Portrait Drawings