Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PEP - Demo</title>
  <script src="http://code.jquery.com/pep/0.3.0/pep.js"></script>
</head>
<body onLoad="PointerEventsDemo()">
<canvas id="drawSurface" touch-action="none"></canvas>
<div class="description">
  <h1>PEP Demo</h1>
  <h2>In the canvas above, we are drawing squares when the event <code>pointermove</code> is triggered.</h2>
</body>
</html>
 
body {
  margin: 0;
}
.description {
  padding: 1em;
  font-family: sans-serif;
}
#drawSurface { 
  border-bottom: 3px solid #bada55;
}
code {
  background: #ccc;
  padding: 4px;
}
 
function PointerEventsDemo(){
        var canvas = document.getElementById("drawSurface");
        var context = canvas.getContext("2d");
  
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight / 3;
        context.fillStyle = "blue";
        canvas.addEventListener("pointermove", paint, false);
  
        function paint( event ) { 
            context.fillRect( event.clientX, event.clientY, 5, 5 );
        }
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
arschmitzpro
0viewers