Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: How do you set bounds of canvas?

1. ## How do you set bounds of canvas?

I have the beginning of my game set up but I need to stop my player going off canvas as the user could use this to cheat and avoid the enemies.

I know I must get the canvas.width and canvas.height and create a function (most likely an if statement) but im confused as to how it all goes together.

I have a rungame method that executes other functions in an orderly fashion.

2. I am confused ... you seem to be able to develop a game with a moving object, but you are not able to restrict the movement by x/y position? Of course this will be an if statement. What do you NOT know about if statements that we could help you with?

3. It would be something like this to stop it going off right hand side of the X axis, and you can extrapolate from this for the rest. Although it is very strange how you've come this far and didn't know how to do this but hey.

Code:
```var gameWidth=canvas.width;
var gameHeight=canvas.height;

if (player.x + player.width >= gamewidth){
player.x=gamewidth-player.width;
}```

4. Entity_'s got it right. I actually just dealt with this myself. You can see it in action if you have a Wii U ('cause I don't know how to work with a keyboard yet, so I can't modify my code to work in a normal browser)...

Paste the following code here to try it.

Code:
```<!DOCTYPE html><html><body>

<script type="text/javascript">

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 854;
canvas.height = 480;
document.body.appendChild(canvas);
// Creates the canvas and sticks it on the page.

var circleX = canvas.width / 2;
var circleY = canvas.height / 2;
var circleColor = "#FF0000";
// Starts the circle in the center of the canvas.

// Required to access GamePad controls.

function moveCircle(){
// Moves the circle if the Wii U Gamepad analog sticks are being moved. Use both for SuperSpeed :p

function noClip(){
// Stops the circle from going off the edge of the canvas.

function clearScreen(){
ctx.clearRect(0, 0, canvas.width, canvas.height);}
// Erases the canvas. Kind of...kind of an obvious one, there >_>

function drawCircle(){
ctx.beginPath();
ctx.arc(circleX, circleY, circleRadius, 0, Math.PI*2, true);
ctx.fillStyle=circleColor;
ctx.fill();}
// Draws a filled circle with a variable radius (default 24) at (circleX, circleY).

function changeCircleSize(){
// Changes the size of the circle with the left and right D-Pad directions.

function jamesLoopton(){
moveCircle();
noClip();
changeCircleSize();
clearScreen();
drawCircle();}
// The game loop.

setInterval(jamesLoopton, 16);
// Runs the game loop every sixteen milliseconds. Almost synchs up with 60 FPS.

</script></body></html>```
I've found that you don't actually need the >= or <= or whatever, just doing > or < works just fine.

Anyway, notice the noClip function. It checks, for example, if the circle's x value plus its radius is greater than the right-side bounds of the canvas. If so, it sets the circle's x value to its radius value. The drawCircle function then shoves it to the appropriate position.

What's really neat is, if you move the circle close to the edge, and then increase its radius with the D-Pad, it'll still stay inside the Canvas bounds ^_^

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•