@@ -84,11 +84,11 @@ function gradient(ctx, grad) {
8484 var stops = [];
8585 if (grad.ctor === 'Linear') {
8686 var p0 = grad._0, p1 = grad._1;
87− g = ctx.createLinearGradient(p0._0, -p0._1, p1._0, -p1._1);
87+ g = ctx.createLinearGradient(p0._0, p0._1, p1._0, p1._1);
8888 stops = fromList(grad._2);
8989 } else {
9090 var p0 = grad._0, p2 = grad._2;
91− g = ctx.createRadialGradient(p0._0, -p0._1, grad._1, p2._0, -p2._1, grad._3);
91+ g = ctx.createRadialGradient(p0._0, p0._1, grad._1, p2._0, p2._1, grad._3);
9292 stops = fromList(grad._4);
9393 }
9494 var len = stops.length;
@@ -119,9 +119,9 @@ function drawImage(redo, ctx, form) {
119119function renderForm(redo, ctx, form) {
120120 ctx.save();
121121 var x = form.x, y = form.y, theta = form.theta, scale = form.scale;
122− if (x !== 0 || y !== 0) ctx.translate(x, -y);
122+ if (x !== 0 || y !== 0) ctx.translate(x, y);
123123 if (theta !== 0) ctx.rotate(theta);
124− if (scale !== 1) ctx.scale(scale, scale);
124+ ctx.scale(scale,-scale);
125125 ctx.beginPath();
126126 var f = form.form;
127127 switch(f.ctor) {
@@ -143,16 +143,17 @@ function makeTransform(w, h, form, matrices) {
143143 var props = form.form._0.props;
144144 var m = A6( Matrix.matrix, 1, 0, 0, 1,
145145 (w - props.width)/2,
146− (props.height - h)/2 );
146+ (h - props.height)/2 );
147147 var len = matrices.length;
148148 for (var i = 0; i < len; ++i) { m = A2( Matrix.multiply, m, matrices[i] ); }
149149
150150 var x = form.x, y = form.y, theta = form.theta, scale = form.scale;
151151 if (x !== 0 || y !== 0) m = A3( Matrix.move, x, y, m );
152152 if (theta !== 0) m = A2( Matrix.rotate, theta, m );
153− if (scale !== 1) m = Matrix.scale( scale );
153+ m = A2( Matrix.scaleY, -scale, m );
154+ if (scale !== 1) m = A2( Matrix.scale, scale, m);
154155 return 'matrix(' + m[0] + ',' + m[3] + ',' + m[1] + ',' +
155− m[4] + ',' + m[2] + ',' + (-m[5]) + ')';
156+ m[4] + ',' + m[2] + ',' + m[5] + ')';
156157}
157158
158159function stepperHelp(list) {
@@ -191,11 +192,11 @@ function stepper(forms) {
191192 var m = f._0;
192193 matrices.push(m);
193194 var x = out.x, y = out.y, theta = out.theta, scale = out.scale;
194− if (x !== 0 || y !== 0) ctx.translate(x, -y);
195+ if (x !== 0 || y !== 0) ctx.translate(x, y);
195196 if (theta !== 0) ctx.rotate(theta);
196197 if (scale !== 1) ctx.scale(scale, scale);
197198 ctx.save();
198− ctx.transform(m[0], m[3], m[1], m[4], m[2], -m[5]);
199+ ctx.transform(m[0], m[3], m[1], m[4], m[2], m[5]);
199200 }
200201 return out;
201202 }
@@ -253,16 +254,16 @@ function updateTracker(w,h,div) {
253254 }
254255 function element(matrices, form) {
255256 var container = kids[i];
256− if (!container) {
257+ if (!container || container.getContext) {
257258 container = newElement('div');
258259 container.style.overflow = 'hidden';
259260 container.style.position = 'absolute';
260− div.appendChild(container);
261− } else if (container.getContext) {
262− container = newElement('div');
263− container.style.overflow = 'hidden';
264− container.style.position = 'absolute';
265− div.insertBefore(container, kids[i]);
261+ addTransform(container.style, 'scaleY(-1)');
262+ if (!container) {
263+ div.appendChild(container);
264+ } else {
265+ div.insertBefore(container, kids[i]);
266+ }
266267 }
267268 // we have added a new node, so we must step our position
268269 ++i;
@@ -303,6 +304,7 @@ function update(div, _, model) {
303304 while (formType = stpr.peekNext()) {
304305 if (ctx === null && formType !== 'FElement') {
305306 ctx = tracker.getContext(stpr.transforms());
307+ ctx.scale(1,-1);
306308 }
307309 var form = stpr.next(ctx);
308310 if (formType === 'FElement') {