Time for action – making a local drawing whiteboard with the Canvas
Carry out the following steps:
- We will focus only on the client side in this section. Open the
index.html
file and add the followingcanvas
markup:<canvas id='drawing-pad' width='500' height='400'> </canvas>
- 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>
- Then, open the
html5games.websocket.js
JavaScript file to add the drawing logic. - Replace the
websocketGame
global object with the following variable at the top of the JavaScript file:var websocketGame = { // ...
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.