2

I am using sketch.js http://intridea.github.io/sketch.js/ so users can create drawing in my app. Once they are finished drawing, and click save, I convert the drawing into a png image using this function:

convertCanvasToImage = (canvas) ->
  image = new Image()
  image.src = canvas.toDataURL("image/png")
  image

And then I just append the image to the DOM.

But what if a user wants to edit the drawing afterwards? How can I take that image and add it to the canvas that sketch.js uses?

I tried the following with failed results. When you click the png image I run this code to try to append the image to canvas, but it does not seem to work at all. The canvas is in a modal and once it appears I run the following code to append the image to canvas, but no image appears. 

template.$('#sketchModal').on 'shown.bs.modal', (e) ->
  c = document.getElementById("sketchPad")
  ctx = c.getContext("2d")
  ctx.drawImage(e.target, 0, 0)
Nearpoint
  • 7,202
  • 13
  • 46
  • 74
  • Just redrawing the image back on the canvas won't work because sketch.js needs to know all the drawing commands and style settings that created the image in the first place. I took a quick look at the source code on GitHub and I don't see any way to save/restore SketchJS drawings. :-( – markE Aug 31 '14 at 04:12
  • yah I know I still haven't found a solution/hack to do it – Nearpoint Aug 31 '14 at 17:21
  • Sorry, there doesn't seem to be a way. Since SketchJS must be reloaded with drawing commands & styles, the only way I see to do that is to save all the commands and styles and then load it all back in when you want to resume. – markE Aug 31 '14 at 17:36

1 Answers1

0

I haven't used sketch js before, but seeing this code I came with an idea

<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>

You don't want to append the image in canvas but rather add it as a background. Try it and please inform me if it worked.

Alkis Kalogeris
  • 17,044
  • 15
  • 59
  • 113
  • I considered this but doesn't really achieve the capability of being able to edit the drawing. You still cannot erase parts of the drawing since it is a background image. It just allows you to look like you are drawing on top of the old drawing. But when you convert the new canvas back to image it is only the layer ontop. So this solution does not work. What I am really looking for is to turn the png back into a canvas drawing, so it can be erased. – Nearpoint Aug 31 '14 at 00:32
  • When you say you it doesn't work, does the console help? Do you have any errors? – Alkis Kalogeris Aug 31 '14 at 00:36
  • hi nearpoint. kindly check my answer here >> http://stackoverflow.com/questions/17939462/continue-edit-sketching-image-using-sketch-js/32845731#32845731 – danmbuen Sep 29 '15 at 13:51