Vas.js - Documentation

Vas.gameArea

The Vas gameArea is the basic canvas needed to create games on. It can hold several different properties, such as width, height, and styles

Declaring gameArea Properties

One way to set gameArea is to declare it before starting the engine. The default values for width and height are 512, and the style is preset to: "".

You can also use setGameArea() to define properties of your gameArea. It takes in an object and will change the gameArea properties.

//Setting vas.gameArea properties
let vas = new Vas();
    vas.gameArea.setGameArea({width: 512, height: 512, style: ""});
    vas.gameArea.start(); //Creates the canvas and links ctx. 

Using Different Class Names to Append Canvas

The gameArea by default tries to append the canvas to an element with the id of "canvas", although you can append it to any id, as long as you change it's gameArea property: Vas.gameArea.appendID . You can also directly change the append location with: Vas.gameArea.appendLocation .

//Changing Vas.gameArea append location
vas.gameArea.appendID = 'myCustomID'; //Changes the default location by appending to an element with a different id.
vas.gameArea.appendLocation = document.getElementById('myCustomID'); //Changes the default location by directly changing the location.
//Either one works, but only one is needed. 

setGameArea() and Properties

The gameArea has many different properties, and using setGameArea can be useful for setting them. The properties it can have are:

Name	Argument	Default	Description
appendID	id	'canvas'	Changes the append location to a specified id. Requires an element on the page to be present with that id.
appendLocation	DOM by id	document.getElementById(appendID)	Changes the append location to a specified document.getElementById()
width	number	512	Changes the width of the gameArea
height	number	512	Changes the height of the gameArea
style	string | style	""	Changes the style of the gameArea
color	string | hex	"black"	DEPRECATE. This parameter can change the color of the gameArea context, but only works for some of the engine.
imageSmoothing	boolean	false	Changes the ctx.imageSmoothingEnabled property. False is preferable for many sprites and maps, as setting it to true can blur smaller images.