0

I am trying to build a "writing on image" type Cordova mobile app using Html5 Canvas backed by Sketch.js, its working to some limit like I can change the Alphabet Image, I can play the sounnd of the Alphabet, I can even draw lines on the canvas using mouse/touch but the problem starts when I try to erase the drawing. It Erasing the drawing but comes back when I try to draw again. I have found this cleared sketch still on canvas in html5 and tried also but no luck.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

<title>Shishutosh App</title>

<link rel="stylesheet" type="text/css" href="css/index.css" />

<link rel="stylesheet" type="text/css" title="default" href="css/page_transition.css">

<link rel="stylesheet" type="text/css" title="default" href="css/hatay_khori.css">

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>

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

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

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

<script type="text/javascript">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady()
{
  var canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;

  screen.lockOrientation('portrait');

}

function mySavingFunction(myCanvasId) {

canvas2ImagePlugin.saveImageDataToLibrary(
    function(msg){
        console.log(msg);
    },
    function(err){
        console.log(err);
    },
    myCanvasId
);
}

</script>

</head>

<body style="text-align:center;">

<div class="app" id="app" >

<div class="tools">

              <ul id="drop-nav">


              <li><a href="index.html" class="transition"><img src="home1.gif"></a>

              </li>

               <li><img src="rong_bachai.gif" />
                  <ul>

                    <li><a href="#colors_sketch" data-tool="marker" data-color="#f00" ><img src="red.png"> </a></li>
                    <li><a href="#colors_sketch" data-tool="marker" data-color="#ff0"><img src="yellow.png"></a></li>

                  </ul>
                </li>
                <li><img src="tuli_bachai.gif" />
                  <ul>
                    <li><a href="#colors_sketch" data-size="3" ><img src="choto_tuli.gif"></a></li>
                    <li><a href="#colors_sketch" data-size="5" ><img src="majhari_tuli.gif"></a></li>
                    <li><a href="#colors_sketch" data-size="10" ><img src="boro_tuli.gif"></a></li>

                  </ul>
                </li>
                <li><li><img src="eraser1.png" onclick="clearCanvas();">

                </li>

                <li><img src="download.png" onclick="mySavingFunction('colors_sketch');">

                </li>

        </ul>
  </div>

  <div class="main">

    <canvas id="colors_sketch" >

      <strong>[Your browser can not show this example.]</strong>

    </canvas>

  </div>

    <div id="statsPanel">

        <div id="scroller" style="width: 100%; height: 50px; margin: 0 auto;">

                <div class="innerScrollArea">

                    <ul>
                        <li><img src="image/Ka.jpg" width="50" height="50" onclick="Change_alphabet('image/Ka.jpg');playAudio('sound/ka.wav');"  /></li>

                        <li><img src="image/Kha.jpg" width="50" height="50" onclick="Change_alphabet('image/Kha.jpg');playAudio('sound/kha.wav');"  /></li>

                        <li><img src="image/Ga.jpg" width="50" height="50" onclick="Change_alphabet('image/Ga.jpg');playAudio('sound/ga.wav');"  /></li>

                        <li><img src="image/Gha.jpg" width="50" height="50" onclick="Change_alphabet('image/Gha.jpg');playAudio('sound/gha.wav');"  /></li>

                        <li><img src="ka.png" width="40" height="40" onclick="Change_alphabet('ka.png');playAudio('ka.mp3');"  /></li>


                  </ul>

                </div>

            </div>

            </div>

  </div>

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

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

  <script type="text/javascript">

  function Change_alphabet(img) {

            $('#colors_sketch').css("background-image", "url(" + img +     ")");

}

</script>

<script type="text/javascript">

var canvas = document.getElementById('colors_sketch');

var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth * .85;

canvas.height = window.innerHeight * .85;

function clearCanvas(){

ctx.clearRect(0, 0, canvas.width, canvas.height);

}

</script>

<script type="text/javascript">

$(function() {

      $('#colors_sketch').sketch();
});

</script>

</body>

</html>

Some help is required to complete the app. Ask me for details.

Thanks in advance.

Community
  • 1
  • 1
user3908960
  • 51
  • 1
  • 6

1 Answers1

1

After Googling for a while I have found the answer from a work ground about the problem in here https://github.com/intridea/sketch.js/issues/3

there I found the following code snippet which works for me.

$("#myClearButton").click(function(){
var canvas = document.getElementById('sketchCanvas');  
canvas.getContext('2d').clearRect(0,0,1920,2000);
$('#sketchCanvas').sketch('actions',[]);
});

Thanks everyone.

user3908960
  • 51
  • 1
  • 6