GitHub - flsafe/dsDraw.js: A personal tool I use to help me draw data structure diagrams using HTML5 Canvas

flsafe / dsDraw.js Public

Notifications You must be signed in to change notification settings
Fork 1
Star 1

A personal tool I use to help me draw data structure diagrams using HTML5 Canvas

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 44 Commits
dsDraw.js		dsDraw.js
example.png		example.png
index.html		index.html
readme.html		readme.html

Repository files navigation

<html>  

  <head>  
    <title>dsDraw</title> 

    <style type="text/css">  
      canvas { border: 1px solid black; }  
    </style> 

    <script type="text/javascript" src="dsDraw.js"></script>

    <script type="text/javascript">
      
      function draw(){  
        var canvas = document.getElementById('tutorial')
        if (canvas.getContext){  
          var ctx = canvas.getContext('2d');  
          
          ctx.save()
            var array = ["a", "b", "c", "d", "e", "f", "\\0"]
            drawer = arrayDrawer()
            drawer.draw(array, ctx)

            ctx.translate(0, 75)
            drawer = arrayDrawer({cellWidth: drawer.arrayCellWidth(array)})
            drawer.draw(['a', 'b', '', '', '', '', ''], ctx)
          ctx.restore()
        }  
      }  
    </script>

  </head>  

  <body onload="draw();">  
    <canvas id="tutorial" width="800" height="600"></canvas>  
  </body>  
</html>