Getting Started



Initialize the game by calling kontra.init() to create the drawing context. By default, it will use the first canvas element on the page, but you can also pass it the ID of the canvas or a Canvas element.



Once the game is initialized, you can create a simple sprite and game loop in just a few lines of code.

var sprite = kontra.sprite({ x: 100, // starting x,y position of the sprite y: 80, color: 'red', // fill color of the sprite rectangle width: 20, // width and height of the sprite rectangle height: 40, dx: 2 // move the sprite 2px to the right every frame }); var loop = kontra.gameLoop({ // create the main game loop update: function() { // update the game state sprite.update(); // wrap the sprites position when it reaches // the edge of the screen if (sprite.x > kontra.canvas.width) { sprite.x = -sprite.width; } }, render: function() { // render the game state sprite.render(); } }); loop.start(); // start the game