diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js index 86e63eed60f..b23ffab9f4a 100644 --- a/src/mixins/canvas_dataurl_exporter.mixin.js +++ b/src/mixins/canvas_dataurl_exporter.mixin.js @@ -69,28 +69,27 @@ translateX = (vp[4] - (cropping.left || 0)) * multiplier, translateY = (vp[5] - (cropping.top || 0)) * multiplier, originalInteractive = this.interactive, - originalContext = this.contextContainer, newVp = [newZoom, 0, 0, newZoom, translateX, translateY], originalRetina = this.enableRetinaScaling, - canvasEl = fabric.util.createCanvasElement(); + canvasEl = fabric.util.createCanvasElement(), + originalContextTop = this.contextTop; canvasEl.width = scaledWidth; canvasEl.height = scaledHeight; + this.contextTop = null; this.enableRetinaScaling = false; this.interactive = false; this.viewportTransform = newVp; this.width = scaledWidth; this.height = scaledHeight; this.calcViewportBoundaries(); - this.contextContainer = canvasEl.getContext('2d'); - // will be renderAllExport(); - this.renderAll(); + this.renderCanvas(canvasEl.getContext('2d'), this._objects); this.viewportTransform = vp; this.width = originalWidth; this.height = originalHeight; this.calcViewportBoundaries(); - this.contextContainer = originalContext; this.interactive = originalInteractive; this.enableRetinaScaling = originalRetina; + this.contextTop = originalContextTop; return canvasEl; }, }); diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js index aabdb609095..e7526e01054 100644 --- a/src/shapes/itext.class.js +++ b/src/shapes/itext.class.js @@ -261,36 +261,29 @@ * Prepare and clean the contextTop */ clearContextTop: function(skipRestore) { - if (!this.isEditing) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { return; } - if (this.canvas && this.canvas.contextTop) { - var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; - ctx.save(); - ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); - this.transform(ctx); - this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix); - this._clearTextArea(ctx); - skipRestore || ctx.restore(); - } + var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this.transform(ctx); + this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix); + this._clearTextArea(ctx); + skipRestore || ctx.restore(); }, /** * Renders cursor or selection (depending on what exists) + * it does on the contextTop. If contextTop is not available, do nothing. */ renderCursorOrSelection: function() { - if (!this.isEditing || !this.canvas) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { return; } - var boundaries = this._getCursorBoundaries(), ctx; - if (this.canvas && this.canvas.contextTop) { - ctx = this.canvas.contextTop; - this.clearContextTop(true); - } - else { - ctx = this.canvas.contextContainer; - ctx.save(); - } + var boundaries = this._getCursorBoundaries(), + ctx = this.canvas.contextTop; + this.clearContextTop(true); if (this.selectionStart === this.selectionEnd) { this.renderCursor(boundaries, ctx); }