HTML5 Web Application Development By Example Beginner's guide

Time for action – creating a canvas pad

You can find the source code for this section at chapter4/example4.1. Let's start by copying our application template that we created in the first chapter and renaming the file names to canvasPad.html, canvasPad.css, and canvasPad.js. Then we'll go in and change the links in the HTML for those files. Finally we change the main application object in the JavaScript to CanvasPadApp.

Now let's add a <canvas> element to the HTML right inside the <div id="main"> element and size it to 600 by 400:

<div id="main">
  <canvas width="600" height="400">
    Sorry, your browser doesn't support canvas.
  </canvas>
</div>

Next we'll add some styles to the CSS to center the canvas on the page and give it a white background. We'll ...