Create HTML widget for IBA with javascript, HTML5 canvas animation


#1

This code is from HTML5canvastutorials.com for drawing an arc. Is it possible to use this code or similar to create an HTML 5 Dashboard/iBooks Author widget? Thanks for your help.

<canvas id="myCanvas" width="578" height="250"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = 1.1 * Math.PI;
  var endAngle = 1.9 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
  context.lineWidth = 15;

  // line color
  context.strokeStyle = 'black';
  context.stroke();
</script>

(Jonathan Deutsch) #2

Feel free to elaborate on your ultimate objective, but you can add this code to a Hype document via:

  1. Choose the ‘Insert > HTML Widget’ menu item
  2. Select this new element, and chose the ‘Edit > Edit Element’s Inner HTML’ menu item
  3. Paste the code

Then you can export this via:
4. Choose the ‘File > Export as HTML5 > Dashboard/iBooks Author Widget…’ menu item


#3

Jonathan, thank you very much for your help. Appreciate it.