The Rendering Context for Your HTML5 Browser Game
This is only possible if we have set the context. For a complete list of all methods you should consult the official specifications page from Mozilla.
Now that we know a bit more about the rendering context and understand why we need it, we can finally write the code. Writing the code is always the easiest part once you understand the big picture.
Let’s start by setting the width and height of the canvas. How to Set the Canvas Size and Context for a 2D Browser Game For a regular game screen that fits into most desktop browsers I use a width of 800 pixels and a height of 480 pixels. Later on we can add an options menu to change the size but when developing this is my favorite size.
If you refresh your browser window you will now see the canvas has changed the size. Setting the context to 2D requires only the following single line of code: ctx = canvas.setContext(“2D”). As you noticed, I use the variable ctx instead of context. I do this because I prefer shorter variable names.