Archives for Rectangle World – HTML5 Canvas and JavaScript: Tutorials and Experiments

A simple HTML5 Canvas dragging example using object oriented programming

A new HTML5 Canvas tutorial. We rework our simple example of dragging display objects with the mouse to illustrate object-oriented programming techniques in JavaScript. Display objects are defined by abstract classes which contain methods for drawing and performing hit tests.

Read more…

Smooth dragging – extending our simple dragging example

A new HTML5 Canvas and JavaScript tutorial. We extend our earlier simple example of dragging objects in the canvas with the mouse. Here, we use a timer-based animation technique with smooth motion, show how to change the layering order of the dislpay objects, and fill the objects with a nice gradient.

Read more…

Dragging objects – a very simple HTML5 Canvas example

The first of what I hope will be many tutorials at RectangleWorld. A simple example for beginners: drawing objects to the canvas which can be dragged around with the mouse. We will extend this basic example in subsequent tutorials.

Read more…

Welcome to RectangleWorld!

Welcome to RectangleWorld, a new blog by Dan Gries of flashandmath. Although I am still very much interested in Flash and ActionScript, I am beginning to explore HTML5 Canvas and JavaScript, and will be posting some beginner-to-advanced tutorials here as I work on mapping my skills to this new environment. Coming from a background in […]

Read more…