JSFiddle - React, Tailwind, and code Playground

by Michael LaCroix

HTML

<script src="http:////cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<table>
    <tr>
        <td><canvas id="canvas1" width="200" height="400"></canvas></td>
        <td><canvas id="canvas2" width="200" height="400"></canvas></td>
    </tr>
</table>

JavaScript

var canvas1 = new fabric.Canvas('canvas1');
var canvas2 = new fabric.Canvas('canvas2');
    
if( window.devicePixelRatio !== 1 ){
    
    var c = canvas1.getElement(), w = c.width, h = c.height;
    
    // Scale the canvas up by two for retina
    c.setAttribute('width', w*window.devicePixelRatio);
    c.setAttribute('height', h*window.devicePixelRatio);
    
    // finally set the scale of the context
    c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);

}

canvas1.add(new fabric.Text('retina'));
canvas2.add(new fabric.Text('no retina'));