A simple HTML canvas example to making an interactive pong paddle with the use of the up and down arrow.

I recently created a mini project based on the classic game Pong using HTML canvas. To get to grips with HTML canvas before implementing all the ball logic and computer paddle I first had to create the users paddle. This is how I went about doing it:

Fitst create a canvas (in this case “pongScreen") element just like any other HTML element, alternatively just add it manually into your html file.

pongScreen = document.createElement("canvas")

Desired height and width for canvas the cavas = 500x375.

Desired keys (Javascript Event Codes) 38 corresponds to the up arrow on the keyboard and 40 corresponds to the down.

Empty object “keystate” for key-state.

const screenHeight = 500

const screenWidth= 375

const upArrow = 38

const downArrow = 40

const keystate = {}

Paddle object with x and y set to null as it will vary as the game progresses, a predetermined width and height and 2 functions (update and draw).

The update function alters the position of the y axis within the canvas based on the keystate, the function currently increments the position by 10 pixels. Varying the incrementation will alter the speed of the paddle.

FillRect() draws a filled rectangle, the default colour is black however, fillstyle can be used to alter this.

const paddle = {

x: null,

y: null,

width: 20,

height: 100, update: function() {

if (keystate[upArrow]) this.y -= 10

if (keystate[downArrow]) this.y += 10

},

draw: function() {

ctx.fillRect(this.x, this.y, this.width, this.height)

}

}

Append two event listeners to the page, while either the up arrow or down arrow key is pressed, run the paddles update function which increments the y axis of the paddle with the corresponding direction.

document.addEventListener("keydown", function(e) {

keystate[e.keyCode] = true

}) document.addEventListener("keyup", function(e) {

delete keystate[e.keyCode]

})

The canvas function sets the canvas, in this case the pongScreen to the predetermined ratio of 500x375, set the context to 2d and appends it to the body. Canvas has no ability to draw on its own but the getContext() method returns properties to allow for this.

const canvas = () => {

pongScreen.width = screenWidth

pongScreen.height = screenHeight

ctx = pongScreen.getContext("2d")

document.body.appendChild(pongScreen)

}

For the paddles draw function to be run on initialization it will require a starting x and y axis.

const paddleDimensions = () => {

paddle.x = paddle.width;

paddle.y = (screenHeight - paddle.height)/2

}

Note that the top left corner of the canvas element is 0,0. Therefore with regards to the canvas in this example the bottom right hand corner would have the coordinates (500, 375).

The requestAnimationFrame method tells the browser that you want to perform an animation and requests that the browser call a specified function to update it prior to the next repaint. As seen below the functions called within the loop are update and draw.

const loop = () => {

update()

draw() window.requestAnimationFrame(loop, pongScreen) }

window.requestAnimationFrame(loop, pongScreen)

The update function currently only updates the paddle however if a ball and another paddle were on the screen their update functions would be within this update function too.

const update = () => {

paddle.update()

}

The draw function fills the pongScreen with a black background as saves it then draws the paddle with whichever colour fillstyle corresponds to before the paddle draw function is called. In this case the paddle will be red.

const draw = () => {

ctx.fillRect(0,0, screenWidth, screenHeight)

ctx.save()

ctx.fillStyle = "#FF0000"

paddle.draw()

ctx.restore()

}

Finally create an initialize function running:

canvas()

paddleDimensions()

loop()

Running the HTML file should display a rectangular black screen with an interactive small red pong paddle on the left side.