0

I have a 3 kiddie games . All of them is tracing/sketching. The game is to sketch lines, letters and numbers.

I already started the sketching the lines and I used sketch.js from http://intridea.github.io/sketch.js/ , which is not really 100% working.

Now my question is, how to do it through letters and numbers.

I have created a sample but it's not really working. So the game is like this. there's a letter 'A', then the user(kid) will trace that A. But in my sample, the letter will gone. So if the user had already traced/sketch it, the "next" button will appear. 

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://intridea.github.com/sketch.js/lib/sketch.min.js"></script>

<canvas id="myCanvas" width="200" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "150px Arial";
ctx.strokeText("A",20,200);
    $('#myCanvas').sketch({
      defaultColor: "#ff0000", 
      defaultSize: 10
    });
</script>

</body>
</html>
Vahn Marty
  • 1,428
  • 3
  • 14
  • 28
  • I would suggest that if a library is not fully working, then don't use it. Unless you know everything about it – Jadon Steinmetz Jan 31 '17 at 13:17
  • The sketch library erases the canvas upon first mousedown and this makes your previously drawn letter disappear. You will have to modify the library's source code in order to prevent this behavior. – Matey Jan 31 '17 at 13:30

0 Answers0