O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

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

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