perjantai 14. kesäkuuta 2013

Tutorial: The basics of HTML5 canvas


Hello!

Today, in this very first topic of my blog, I'm going to teach you how to draw a simple line on HTML5's new feature, 'canvas'. First I'll show you the code and afterwards I'm going to explain it.

Here's the code:

<body>
  <button onclick="draw()" type="button">Draw a line</button>
  <canvas id="theCanvas" width="100" height="100"
  style="border: 1px solid black"></canvas>
  
  <script type="text/javascript">
    var canvas = document.getElementById("theCanvas");
    var ctx = canvas.getContext
  </script>
</body>