Double display of canvas element

Question

The drawn lines appear not only in the Canvas-Element but also at the top of the page it is displayed again.

This happens when a touch event is been released.

Here you can find the source code and the result (PhoneGap and Jquery Mobile is used).

Do anybody has an idea what’s the reason for this fault?

http://gomami.ch/bugs/screenshot.png http://gomami.ch/bugs/screenshot.png

JavaScript (loaded in header after includes to jQuery/PhoneGap):

//*********************************************************
// Wait for Cordova to Load
//*********************************************************
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  canvas("aufprallstelleA","test");
}

// function to setup a new canvas for drawing
function canvas(canvas, element){
    //define and resize canvas
    width = $(window).width();
    width = (width/100)*90;
    height = width/1.6901408;
    $("#content").width(width);
    $("#"+element).height(height);
    $("#"+element).width(width);
    var html = 'This is de Canvas field wehre you can draw<br><canvas id="'+
               canvas+'" width="'+width+'" height="'+height+
               '" style="border:black solid 1px;background-size: 100%; background-repeat: no-repeat;background-image: url(\'images/allgemein/aufprallstelle.PNG\');"></canvas>';
    $("#"+element).html(html);      
    // setup canvas
    ctx=document.getElementById(canvas).getContext("2d");
    ctx.strokeStyle = "red";
    ctx.lineWidth = 5;          
    // setup to trigger drawing on mouse or touch
    $("#"+canvas).on("touchstart", start);
    $("#"+canvas).on("touchmove", move);
}

function start(e){
    e = e.originalEvent;
    x = e.changedTouches[0].pageX-20;
    y = e.changedTouches[0].pageY-$(this).position().top;
    ctx.moveTo(x,y);
}

function move(e){
    e.preventDefault();
    e = e.originalEvent;
    x = e.changedTouches[0].pageX-20;
    y = e.changedTouches[0].pageY-$(this).position().top;
    ctx.lineTo(x,y);
    ctx.stroke();
}

function clearcanvas(id) {
    var canvas = document.getElementById(id);
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
}    

HTML:

<div data-role="page" id="main">
  <div data-role="header" id="header">
    <div id="header_anzeige">
    </div>
  </div>
  <div data-role="content" id="content" >
    <div id="test" style="margin-top:265px;"></div><br>
    Hello, this is JQuery Mobile running in PhoneGap 2
  </div>   
</div> 
copyright
</div>
</div>

Answer 1

I've solved the issue by positionning the canvas in absolute instead of relative positionning as it's mentioned on https://github.com/jquery/jquery-mobile/issues/5107