Introducing The HTML5 Canvas Element

Thomas Verbeek, University of Otago

Audience: Intermediate – assumes basic knowledge of HTML & Javascript


HTML5 introduced the canvas element to allow dynamic scriptable rendering of 2D shapes and images. The canvas element defines a drawing region, and Javascript is deployed to access drawing functions and 2D APIs to dynamically generate graphics. The presentation will be a beginners guide through the Canvas element in HTML5.  It will cover the basics of the element (what it is, how it is supported), the syntax for defining and interacting with the canvas element (html syntax, coordinate system, Javascript), some simple drawing techniques (strokes, fill, shapes, text), more practical manipulations (gradients, img elements, procedural drawing), and examples of it’s implementation in the industry (canvas-based applications, games and tools).

Speaker Bio:

Thomas is a Masters student at University of Otago. His research is vested in mathematics for texture generation, particularly algorithms for solid noise synthesis. He has taught 100 and 200 level web development courses as a lab demonstrator since 2010.  Outside the University, he works as a software developer and 3D artist for photorealistic games and simulation company Areo (, and also does contract iOS development in Dunedin.

Thomas is a recipient of the prestigious AUC Student Developer Scholarship for 2010-2011. He completed a Summer Bursary project in 2009-2010 for Otago University which has been featured at various conferences, and has created 3D animations and 3D technical works that have been submitted to Siggraph and various other international festivals/conferences. His work with Areo has won United Nations World Summit Awards in 2009 and 2011 for emergent technology.

Leave a Reply

Your email address will not be published. Required fields are marked *