1

I'm tring to use the "touchstart" mobile event and the HTML5 canvas to draw something using jquery mobile !

I use this html code :

<canvas id="canvasTouch">Canvas is not supported</canvas>

and Js code :

canvas = document.getElementById('canvasTouch');        
context = canvas.getContext('2d');

$(document).bind("touchstart",function(event) {    
    context.beginPath();
    context.arc(event.originalEvent.targetTouches[0].pageX,event.originalEvent.targetTouches[0].pageY, 10, 0, Math.PI*2); 
    context.fill();
    context.closePath();
}

But my circle look like ellipsis and are quite blurred !

I tried this code with a classic html page and it works fine on my device ...

Do you have any idea ?

Thanks

user1948593
  • 45
  • 1
  • 6

1 Answers1

2

Have you set the context's width and height to the correct values (typically the canvas element's dimensions)?

Having different sizes between the element and context will break the 1:1 pixel mapping you might expect, causing distortion and blurring. If you are changing the element size with attributes or scripts, this is particularly important (off the top of my head, I don't remember when it auto-changes the context size).

ssube
  • 47,010
  • 7
  • 103
  • 140
  • In fact, I set the canvas element's size using javascript script and window.innerwidth/height and its height is about 1.5 its width ! So my canvas isn't a square ! So what should I do ? – user1948593 Jan 09 '13 at 18:29
  • When setting a width or height attribute of a canvas element in javascript (canvas.width = canvas.width;) the change to the context size should immediately follow the resetting of the context to its default state. – DerekR Jan 09 '13 at 23:23
  • Expanding off peachykeens answer, I'm going to guess there is either a css style changing the display dimensions of the canvas, or you have scaled the canvas with a transform like context.scale(2,1). – DerekR Jan 09 '13 at 23:30
  • @user1948593 Try explicitly setting the context size to the element's size (it doesn't matter if it's not square, so long as it matches the container's size) and make absolutely sure nothing changes it after that (including CSS, and DerekR noted). – ssube Jan 10 '13 at 00:04