Simple Example

Click and drag in the box below to draw a simple black line.

<canvas id="simple_sketch" width="800" height="300"></canvas>
<script type="text/javascript">
  $(function() {
    $('#simple_sketch').sketch();
  });
</script>
        

Changing Color/Size, Downloading Image

Sketch.js makes it very easy to create links that function as tool buttons. By default, any link that has a href tag that points to the ID of the converted canvas will automatically be considered a tool link. If the link has a data-color attribute then clicking it will change the color. Similarly, a data-size attribute will change the brush size.

Setting the data-download on a tool link to jpeg or png will create a download button for the specified format.

<div class="tools">
  <a href="#colors_sketch" data-download="png" style="float: right; width: 100px;">Download</a>
</div>
<canvas id="colors_sketch" width="800" height="300"></canvas>
<script type="text/javascript">
  $(function() {
    $.each(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#000', '#fff'], function() {
      $('#colors_demo .tools').append("<a href='#colors_sketch' data-color='" + this + "' style='width: 10px; background: " + this + ";'></a> ");
    });
    $.each([3, 5, 10, 15], function() {
      $('#colors_demo .tools').append("<a href='#colors_sketch' data-size='" + this + "' style='background: #ccc'>" + this + "</a> ");
    });
    $('#colors_sketch').sketch();
  });
</script>
        

Tools Example

Click buttons to switch between tools.

<div class="tools">
  <a href="#tools_sketch" data-tool="marker">Marker</a>
  <a href="#tools_sketch" data-tool="eraser">Eraser</a>
</div>
<canvas id="tools_sketch" width="800" height="300" style="background: url(http://farm1.static.flickr.com/91/239595759_3c3626b24a_b.jpg) no-repeat center center;"></canvas>
<script type="text/javascript">
  $(function() {
    $('#tools_sketch').sketch({defaultColor: "#ff0"});
  });
</script>