Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

CHAPTER 9: Canvas > Interaction Example

Interaction Example

The next example uses a little bit from Chapter 6. Here we track a touch event and calculate a swipe event all from within the <canvas> 300 × 300 pixel element. The effect is a page that paints dots on the screen and erases them with a swipe. You can see this in Figure 9-3 or try the interaction for yourself on the companion site.

Companion Site Reference

Example 9-2: Follow the link below to run this example on the companion site.

http://www.learnhtml5book.com/chapter9/interact.php

First, we need to set up the <canvas>.

<style>
    .workarea {border: 1px solid #000; }
</style>
<h2>Touch Canvas</h2>
<p>Touch to make a dot. Swipe left to clear.</p>
<canvas id="touch_canvas" width="300" height="300" class="workarea"></canvas>
<script type="text/javascript">

    var canvas = document.querySelector("#touch_canvas");
    var ctx = canvas.getContext("2d");
    var curX,curY;

    var startX = 0;
    var startY = 0;
    var endX = 0;
    var endY = 0;

</script>

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free 10-Day Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint