O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required