Back to Forum
Mario Game Canvas Drawing Issues
b1u3ch1p posted 4 years ago

Hello Chris Courses Crew!

I have a mostly completed Mario game, and I'm wanting to add some text areas in some various places.

I copied the platform code and made amendments, but I'm not actually seeing it represented inside the canvas. I console log out the various declarations and object creations, but it doesn't seem to be working.

Class Code

class TextArea {

constructor({x, y, text, width, height}) {

this.position = {

x,

y

}

//this.image = image

this.width = width

this.height = height

//this.block = block

this.text = text

this.velocity = {

x: 0

}

}

draw() {

c.fillStyle = 'black'

c.fillRect(this.position.x, this.position.y, this.width, this.height)

if(this.text) {

c.font = '40px Arial'

c.fillStyle = 'green'

c.fillText(this.text, this.position.x, this.position.y)

}

}

update(){

this.draw()

//this.position.x += this.velocity.x

}

}

I declare an empty array above init:

let texts = []

A new object is instantiated into the array at the bottom of init:

texts.push(new TextArea({x: 100, y: 400, text: "Hello World!", width: 100, height: 50}))

The array item gets called in animate after the platforms, goombas, and other objects:

texts.forEach((text) => {

text.update()

console.log(text)

})

I feel like there's a simple solution but I can't seem to solve it. Any help is appreciated!

chris's profile photo
chris posted 4 years ago

Hi b1u3ch1p, you're off to the right start, your class creation, object instantiation, and rendering all seem correct. Your best bet in this case is to start commenting out the render code of other objects like your background, goombas, and platforms; up until you can be absolutely positive that your text is being drawn where you expect it to be.

If not showing still with a blank canvas, you'll want add some draw code directly within the object you're looping over like this:

texts.forEach((text) => {   
  text.update()
  c.fillText('my text here', 0,0)
})

That should show some text as long as texts is populated. With this you should be able to pinpoint your bug and see exactly what's preventing your text from rendering.

Also, I'll be adding some fixes to the forum's text editor so you can easily see what each of the text buttons does, hang tight for that!

b
b1u3ch1p posted 4 years ago

Thanks Chris!

I was tinkering around with it and found it easiest to add some logic where when Mario touches an object, pop the text on screen at visible x,y coordinates.

This worked and solved the problem to have the relevant story elements pop up for the player.

Thank you for all your help!

Want to participate?

Create a free Chris Courses account to begin

Providing the lift to launch your development career

© 2026 Chris Courses. All rights reserved.