O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

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

Creating a drawing application

In this recipe, we'll create a nifty drawing application so users can draw pictures right in the browser.

Creating a drawing application

How to do it...

Follow these steps to create a simple drawing application:

  1. Style the toolbar, inputs, and buttons:
     <style> canvas { border: 1px solid black; font-family: “Helvetica Neue”, “Arial”, “Lucida Grande”, “Lucida Sans Unicode”, “Microsoft YaHei”, sans-serif; font-size: 13px; line-height: 1.5; color: #474747; } #toolbar { width: 590px; border: 1px solid black; border-bottom: 0px; padding: 5px; background-color: #f8f8f8; } input[type = ‘text’] { width: 30px; margin: 0px 5px 0px 5px; } label { margin-left: 40px; ...

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