[whatwg] [Canvas] Behavior on non-invertable CTM

Hi,

The spec doesn't have any wording about the behavior on non-invertible CTMs on Canvas contexts. Is it still possible to add segments to the current path once a CTM is not invertible anymore? Does the path get rejected completely then? Implementations are fairly different.

Here are two examples (code attached at the end of the mail as well):

http://jsfiddle.net/Dghuh/1/
http://jsfiddle.net/Dghuh/2/

Note that the path is stroked after restoring the initial CTM in both examples.

The first one does scale(0), which should make the CTM non-invertibe, WebKit still applies lineTo and closePath for some reason. IE and FF refuse to draw anything.

The second does setTransform(0,0,0,0,0), which should reset the CTM to a zero matrix (again, not invertible). IE, Opera and FF draw a line to 0,0 and close the path afterwards (which kind of makes sense, since the universe is convoluted to one point). WebKit refuses the lineTo command and closes the path as expected.

This is an edge case, but should still be clarified in the spec.

A possible (and maybe easiest) solution would be to refuse all values for transformation functions that cause an invertible matrix. On the other hand, all browsers allow setting  not invertible CTMs at the moment.

Greetings,
Dirk

Example 1:

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
window.onload = function () {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	ctx.moveTo(10,10);
	ctx.lineTo(90,10);
	ctx.lineTo(90,90);
	ctx.lineTo(10,90);
	ctx.save();
	ctx.scale(0);
	ctx.lineTo(45,45);
	ctx.closePath();
	ctx.restore();
	ctx.strokeStyle= "black";
	ctx.stroke();
}
  </script>
  <style>

  </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>


Example 2:

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
window.onload = function () {
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	ctx.moveTo(10,10);
	ctx.lineTo(90,10);
	ctx.lineTo(90,90);
	ctx.lineTo(10,90);
	ctx.save();
	ctx.setTransform(0,0,0,0,0,0);
	ctx.lineTo(45,45);
	ctx.closePath();
	ctx.restore();
	ctx.strokeStyle= "black";
	ctx.stroke();
}
  </script>
  <style>

  </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>

Received on Wednesday, 30 January 2013 01:21:57 UTC