Tag Archives: game

Javascript and Canvas – how to program interactive art and html5 games in the browser

Javascript is a wonderful programming language that runs in every web browser.

<canvas> is an HTML5 element for drawing interacive graphics.

<canvas width=”320″ height=”240″ id=”gameboard1″></canvas>

The id is used by the javascript to get a reference to the canvas in 2 steps – get the element using the id then get the 2d context to draw on – then the fun begins !

<script type=”text/javascript”>
var board=document.getElementById(“gameboard1”);
var game_screen=board.getContext(“2d”);
game_screen.fillStyle=”#FF0000″;
game_screen.fillRect(0,0,150,75);
</script>

Test it. Example & The source code.

The two combine pleasantly to make nearly anything you could imagine.

The Khan Academy teaches computer science using javascipt and processing.js – processing is a library used to simplify interactive graphics widely used by artists for graphics and interactivity.

2 gentle canvas and javascript tutorials for mouse and keyboard interactive game programming in javascript :
breakout clone
dragable objects