get strokes from a canvas with Javascript? - Javascript Canvas

Javascript examples for Canvas:Stroke

  1. HOME
  2. Javascript
  3. Canvas
  4. Stroke

Description

get strokes from a canvas with Javascript?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/intridea/sketch.js/master/lib/sketch.min.js"></script> 
      <style id="compiled-css" type="text/css">

.stroke {//  w  w w  . j  a  v a  2  s  .c  o  m
   border: solid 1px blue;
   float : left;
   padding: 10px;
   margin: 5px;
}


      </style> 
   </head> 
   <body> 
      <canvas id="test"></canvas> 
      <button id="clear">clear</button> 
      <button id="redraw">redraw</button> 
      <button id="strokes">print strokes</button> 
      <div id="display"></div> 
      <script type="text/javascript">
$(function() {
    var $cv = $('#test');
    $('#test').sketch();
    var sketch = $cv.data('sketch');
    $('#clear').click(function() {
        $('#test').get(0).width = 300;
    });
    $('#redraw').click(function() {
        sketch.redraw();
    });
    $('#strokes').click(function() {
        var $display = $('#display').empty();
      sketch.actions.forEach(function(strk, idx) {
            if (!strk.events) {
               return;
            }
           var $div = $('<div>').addClass('stroke');
            $('<div>').text('Stroke #' + idx).appendTo($div);
            strk.events.forEach(function(pt, idx) {
                $("<p>").text(idx + ': (' + pt.x + ',' + pt.y + ')'  ).appendTo($div);
            });
            $div.appendTo($display);
        });
    });
  });

      </script>  
   </body>
</html>

Related Tutorials