Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – making a local drawing whiteboard with the Canvas


Carry out the following steps:

  1. We will focus only on the client side in this section. Open the index.html file and add the following canvas markup:

    <canvas id='drawing-pad' width='500' height='400'>
    </canvas>
  2. We will draw something in the Canvas and we will need the mouse position relative to the Canvas for this. We did this in Chapter 4, Building the Untangle Game with Canvas and the Drawing API. Add the following style to the Canvas:

    <style>
      canvas{position:relative;}
    </style>
  3. Then, open the html5games.websocket.js JavaScript file to add the drawing logic.

  4. Replace the websocketGame global object with the following variable at the top of the JavaScript file:

    var websocketGame = {
       // indicates if it is drawing now.
       isDrawing : false,
    
       // the starting point of next line drawing.
       startX : 0,
       startY : 0,
    }
    
    // canvas context
    var canvas = document.getElementById('drawing-pad');
    var ctx = canvas...