P. 1
HTML Canvas Guide

HTML Canvas Guide

|Views: 494|Likes:
Published by Paul McKellar

More info:

Published by: Paul McKellar on Apr 26, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

04/26/2012

pdf

text

original

To add a custom button to the canvas, create an HTML div or img element and use CSS to style the element

and position it on top of the canvas.

Adding Mouse and Touch Controls to Canvas

Creating Custom Canvas Controls

2011-03-14 | © 2011 Apple Inc. All Rights Reserved.

139

Add a listener function for touchstart and mousedown events to detect a custom button being pressed,

andaddalistenerfunctionfortouchendandmouseupeventstodetectthebuttonbeingreleased.Youmight

want to take an action when the button is pressed or when it is released, or both.

Add a state variable to track whether the button is pressed or released.

Add a listener function for mouseup events to the page as a whole, in case the user clicks your button, then

moves the mouse pointer off your button before releasing the mouse button.

Similarly,addalistenerfunctionfortouchcanceleventstothepageasawhole,incasethetouchiscanceled

for some reason (such as an incoming phone call, for example).

The example in Listing 13-5 creates a div element, styles it as a button, and positions it on the canvas. When

the button is clicked or touched, the button state changes and a different style is applied to the button. The

canvas also changes, in this case to blue. When the touch ends or the mouse button is released, the button

style reverts to the unpressed state and the canvas changes to black. The results are illustrated in Figure 13-5.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->