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

Get HTML5 Canvas Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.