Time for action – drawing color circles in the Canvas

  1. First, let's set up the new environment for the example. That is, an HTML file that will contain the canvas element, a jQuery library to help us in JavaScript, a JavaScript file containing the actual drawing logic, and a style sheet:
    index.html
js/
  js/jquery-2.1.3.js
  js/untangle.js
  js/untangle.drawing.js
  js/untangle.data.js
  js/untangle.input.js
css/
  css/untangle.css
images/
  2. Put the following HTML code into the index.html file. It is a basic HTML document containing the canvas element:
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Drawing Circles in Canvas</title> <link rel="stylesheet" href="css/untangle.css"> </head> <body> <header> <h1>Drawing in Canvas</h1> </header> ...

Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial