---
date: '2014-11-07'
title: 'Touch events'
description: 'Touch events on canvas using FabricJS'
thumbnail: 'touch-events.png'
tags: ['touch', 'events', 'interaction']
---

<div
  class="codepen-later"
  data-editable="true"
  data-height="500"
  data-default-tab="result"
  data-prefill='{
    "scripts": ["https://unpkg.com/fabric@4.0.0-beta.12/dist/fabric.js"]
  }'
>
<pre data-lang="html">
  <p id="info" style="background: #eef; width: 583px; padding: 10px; overflow: scroll; height: 40px"> </p>
  <canvas id="c" width="600" height="500" style="border:1px solid #ccc"></canvas>
</pre>
<pre data-lang="js">
var demoImg = 'http://fabricjs.github.io/assets/pug.jpg';

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL(demoImg, function(img) {
img.scale(0.5).set({
left: 150,
top: 150,
angle: -15
});
canvas.add(img).setActiveObject(img);
});

var info = document.getElementById('info');

canvas.on({
'touch:gesture': function() {
var text = document.createTextNode(' Gesture ');
info.insertBefore(text, info.firstChild);
},
'touch:drag': function() {
var text = document.createTextNode(' Dragging ');
info.insertBefore(text, info.firstChild);
},
'touch:orientation': function() {
var text = document.createTextNode(' Orientation ');
info.insertBefore(text, info.firstChild);
},
'touch:shake': function() {
var text = document.createTextNode(' Shaking ');
info.insertBefore(text, info.firstChild);
},
'touch:longpress': function() {
var text = document.createTextNode(' Longpress ');
info.insertBefore(text, info.firstChild);
}
});

</pre>
</div>