Canvas
Explore how the HTML canvas element sets the foundation for drawing in JavaScript game development. Learn to configure the canvas, access its 2D rendering context, and draw shapes like rectangles to build Tetris graphics. Understand the immediate rendering system of canvas and how to create simple animations by clearing and redrawing frames. This lesson helps you grasp essential canvas operations to start designing and animating game visuals.
We'll cover the following...
The HTML canvas element provides a blank canvas on which we can draw our game. Drawing is a fundamental aspect of making our game, and we will focus on how we can draw on the canvas to make the graphics for our game.
Using canvas
The default size of the canvas is 300 pixels × 150 pixels (width × height). However, custom sizes can be defined using the HTML height and width properties. We add the canvas element to the HTML:
<canvas id="canvas"></canvas>
We can add a reference to the HTML <canvas> element in the DOM (Document Object Model) using the ...