Despeje todo el canvas HTML5 transformado mientras conserva la transformación de context

Quiero ampliar y desplazar un canvas de HTML5 transformando el context utilizando translate() y scale() , borrando el canvas y luego networkingibujando. Tenga en count que explícitamente no estoy llamando a save() y restre() alnetworkingedor de mis transformaciones.

Si realizo el estándar ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height) entonces no se borrará todo el canvas visible; la networkingucción de escala o la panoramización pueden hacer que este rectángulo inicial no cubra exactamente el área de dibujo.

Si realizo el método de borrado amigable para Webkit …

 var w=canvas.width; canvas.width = 0; canvas.width = w; 

… luego se restablece la transformación acumulativa del context.

¿Cómo puedo borrar todo el context del canvas sin perder mi transformación?

Hacer un seguimiento de toda la información de transformación como lo que presumiblemente está haciendo es lo que varios otros hasta ahora han hecho (como cake.js y mi propia biblioteca, para dos). Creo que hacer esto será prácticamente inevitable para cualquier biblioteca de canvass grande.

Ilmari de cake.js incluso se quejó a mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=408804

En su lugar, puede llamar save / restaurar alnetworkingedor de su método claro:

 // I have lots of transforms right now ctx.save(); ctx.setTransform(1,0,0,1,0,0); // Will always clear the right space ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); ctx.restre(); // Still have my old transforms 

¿No satisfará eso tu caso?

Para aquellos a quienes les importa rastrear sus transformaciones de context completas, aquí está mi código para hacerlo a pedido, por context. Esto viene precedido por el uso que muestra cómo borrar el rectángulo completo en function de las coorderadas transformadas. Puede ver el código en uso en mi website.

 window.onload = function(){ var canvas = document.getElementsByTagName('canvas')[0]; var ctx = canvas.getContext('2d'); trackTransforms(ctx); function networkingraw(){ var p1 = ctx.transformedPoint(0,0); var p2 = ctx.transformedPoint(canvas.width,canvas.height); ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y); // ... } } // Adds ctx.getTransform(), returning an SVGMatrix // Adds ctx.transformedPoint(x,y), returning an SVGPoint function trackTransforms(ctx){ var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg'); var xform = svg.createSVGMatrix(); ctx.getTransform = function(){ return xform; }; var savedTransforms = []; var save = ctx.save; ctx.save = function(){ savedTransforms.push(xform.translate(0,0)); return save.call(ctx); }; var restre = ctx.restre; ctx.restre = function(){ xform = savedTransforms.pop(); return restre.call(ctx); }; var scale = ctx.scale; ctx.scale = function(sx,sy){ xform = xform.scaleNonUniform(sx,sy); return scale.call(ctx,sx,sy); }; var rotate = ctx.rotate; ctx.rotate = function(radians){ xform = xform.rotate(radians*180/Math.PI); return rotate.call(ctx,radians); }; var translate = ctx.translate; ctx.translate = function(dx,dy){ xform = xform.translate(dx,dy); return translate.call(ctx,dx,dy); }; var transform = ctx.transform; ctx.transform = function(a,b,c,d,e,f){ var m2 = svg.createSVGMatrix(); m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f; xform = xform.multiply(m2); return transform.call(ctx,a,b,c,d,e,f); }; var setTransform = ctx.setTransform; ctx.setTransform = function(a,b,c,d,e,f){ xform.a = a; xform.b = b; xform.c = c; xform.d = d; xform.e = e; xform.f = f; return setTransform.call(ctx,a,b,c,d,e,f); }; var pt = svg.createSVGPoint(); ctx.transformedPoint = function(x,y){ pt.x=x; pt.y=y; return pt.matrixTransform(xform.inverse()); } }