doc.progysm.com

canvas width/height

Si on ne spécifie pas les dimensions du canvas, la largeur est 300 et la hauteur est 150. Ce qui veut dire que si on utilise des tailles CSS de 100%, les dimensions internes seront 300x150 et les pixels seront étirés pour remplir l'écran.

html, body, canvas { width:100%; height: 100;}

Path2D

Path2D permet de sauvegarder en mémoire des opérations de dessin. En plus, on peut se servir de ce chemin pour détecter si des coordonnées x/y (un clic de souris par exemple) se trouve dans ce chemin.

Par exemple si on veut dessiner un arc dans un context 2D:

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0000';
ctx.beginPath();
ctx.arc(150, 150, 150, 0, Math.PI());
ctx.closePath();
ctx.fill();

On peut créer un Path2D et recréer l'appel à l'arc().

var path = new Path2D();
path.arc(150, 150, 150, 0, Math.PI());

// draw
ctx.fillStyle = '#ff0000';
ctx.fill(path);

On peut aussi savoir si un point est dans le chemin (intérieur)

var x = 10, y = 10;
ctx.isPointInPath(path, x, y);

Limitation

Je crois que la seule façon de déplacer le chemin est d'en recréer un neuf.

Position x/y de la souris, relatif au canvas.

Soit un évènement:

var canvas = document.querySelector('canvas');
canvas.addEventListener('mousemove', function(e) {
  var position = getMouseXY(e, canvas); // retourne {x, y}
})

/**
 * @param Event e
 * @param DOMElement element
 * Source originale : http://jsfiddle.net/j8L4tqdq/ 
 */
function getMouseXY(e, element) {
  var offsetX = 0, offsetY = 0;
  
  if (element.offsetParent !== undefined) {
    do {
      offsetX += element.offsetLeft;
      offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
  }

  // we need to add canvas padding-left, border-left, left here  to offsetX
  // we need to add canvas padding-top, border-top, top here  to offsetY

  return {x: e.pageX - offsetX, y: e.pageY - offsetY};
}

Exemple de canvas (getMouseXY/Path2D)

jsfiddle j8L4tqdq/4/ (2014-12-30)