Drawing canvas by sketch.js

drawing-canvas-by-sketch-js.markdown

Drawing canvas by sketch.js

Sample code for making drawing playground

A Pen by Augsorn Chanklad on CodePen.

License.

index.html

<center>
  <h1>Drawing canvas by sketch.js</h1>
  <p>Paint anything as you want in this grey area</p>
  <button id="btnClear">CLEAR</button>
  <br>
  <br>
  <div id="sketch-container"></div>
</center>

script.js

var sketch = Sketch.create({
  container: document.getElementById('sketch-container'),
  fullscreen: false,
  width: 960,
  height: 500,
  autoclear: false,
  touchmove: function() {
    if (this.dragging) {
      var touch = this.touches[0];
      this.lineWidth = 3;
      this.beginPath();
      this.moveTo(touch.ox, touch.oy);
      this.lineTo(touch.x, touch.y);
      this.stroke();
    }
  }
})

document.getElementById('btnClear').addEventListener("click", function(){
  sketch.clear()
});

scripts

<script src="https://soulwire.github.io/sketch.js/js/sketch.js"></script>

style.css

#sketch-container {
  background: #EAEAEA;
  width: 960px;
  height: 500px;
}