WebFund 2014W Lecture 17

The video from the lecture given on March 14, 2014 is available:

• Small from screencast.com
• Large from screencast.com
• Original from CUOL

adventure-editor-class is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

HTML Canvas Element

• Part of HTML5
• scriptable rendering of 2D shapes and bitmap images

 <canvas id="example" width="200" height="200">
 </canvas>

• We can use Javascript to draw on the canvas.
• The following code draws a red box on the screen.

 <script>
   var example = document.getElementById('example');
   var context = example.getContext('2d');
   context.fillStyle = 'red';
   context.fillRect(30, 30, 50, 50)
   //The following code draws a circle.
   context.beginPath();
   context.arc(100, 75, 50, 0, 2 *Math.PI);
   context.stroke();
 </script>

• Drawing a arc is similar in languages such as Processing.
• Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).