Improved Canvas drawing for retina displays

Hello,

I added these lines of code:

key: "prepareCanvas",
value: function prepareCanvas() {
// Get the canvas context
var ctx = this.canvas.getContext("2d");

ctx.save();

(0, _shared.calculateEncodingAttributes)(this.encodings, this.options, ctx);
var totalWidth = (0, _shared.getTotalWidthOfEncodings)(this.encodings);
var maxHeight = (0, _shared.getMaximumHeightOfEncodings)(this.encodings);

this.canvas.width = totalWidth + this.options.marginLeft + this.options.marginRight;

this.canvas.height = maxHeight;

// ====== FIX RETINA BLUR ======
this.canvas.style.width = this.canvas.width + 'px'
this.canvas.style.height = this.canvas.height + 'px'

// Get the device pixel ratio, falling back to 1.
var dpr = window.devicePixelRatio || 1;
// Get the size of the canvas in CSS pixels.
var rect = this.canvas.getBoundingClientRect();
// Give the canvas pixel dimensions of their CSS
// size * the device pixel ratio.
this.canvas.width = rect.width * dpr;
this.canvas.height = rect.height * dpr;
// Scale all drawing operations by the dpr, so you
// don't have to worry about the difference.
ctx.scale(dpr, dpr);
// ========================

// Paint the canvas
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
if (this.options.background) {
ctx.fillStyle = this.options.background;
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
}

ctx.translate(this.options.marginLeft, 0);
}

to the prepareCanvas() function in order to make it render completely sharp in retina displays as opposed to the blurry image created before.

I leave it here in case you want to make use of it.

Thanks

Start at the prepareCanvas() function described in the issue and inspect how the canvas dimensions and drawing context are currently initialized. Confirm the change preserves normal rendering while making output sharp on retina displays, then verify the result in a browser at a high device pixel ratio.

Written by the indexing model from the issue text.