Tag Archives: code

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

Code Folding for Gedit 3

I have to fold my code, collapsing functions to their title, that allows me a high level of abstraction – an overview if you will – and makes the whole thing easier to grok.

Unfortunately gedit 3 broke older plugins so code folding stopped working.

This guy rewrote the gedit code folding plugin for gedit 3 and above – so now I can fold my code in gedit – yay :D

https://github.com/aeischeid/gedit-folding