Sign in to follow this  

Where do I start with screen positions in JavaScript without a library?

Recommended Posts

I would like to know where to start in positioning things on the screen in JavaScript in the browser.  I'm not sure where to begin, as it's not anything like regular web programming.  I don't know how to visualize the solution.


Like this,


See how he has stuff everywhere.  I mean it's not like a regular webpage.  The source code is a lot of "stuff," so I don't know where to start.  HTML5 canvas?


Thanks for any beginning guidance.

Share this post

Link to post
Share on other sites

Start with web page as simple as this:

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>The Game</title>
        <canvas id="canvas" width="1024" height="768" />
        <script src="game.js" />

Loaded script then will hook document's callbacks (document.addEventListener("mousemove", ... ) etc),

grab canvas context with document.getElelementById('canvas').getContext("2d" or "webgl"), then draw something using context's functions.

Here's docs for 2d canvas context:


Basically it's like having some engine, Love2D-like, or something similar, just different in available functions and resources access.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this