CODEWITHSUNDEEP
javascriptjquerycordovacanvas
Go Mami
Go Mami

Reputation: 151

Double display of canvas element

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>

Upvotes: 15

Views: 1299

Answers (3)

Rafael Santiago
Rafael Santiago

Reputation: 78

try to surround the canvas with a div and apply the CSS overflow:hidden to this div.

Upvotes: 0

nonozor
nonozor

Reputation: 924

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

Upvotes: 1

IvanAtBest
IvanAtBest

Reputation: 2924

onDeviceReady is probably called twice. Have you tried saving the canvas in a variable to avoid getting created twice? Note that the first one to get called is probably the faulty one, so the window size will most likely be wrong.

var theCanvas;
function onDeviceReady() {
    if(!theCanvas){
        canvas("aufprallstelleA","test");
    }
}

function canvas(canvas, element){
    //define and resize canvas
    width = $(window).width();

    [...]

    $("#"+canvas).on("touchmove", move);
    return $("#"+canvas);
}

EDIT: I did a bit of research, it does seem the problem is from the event being called twice. If you can confirm this we can look for a workaround.

Upvotes: 0

Related Questions