Canvas rendering looks very pixelated on Retina screens

[heartcode]

Canvas rendering looks very pixelated on Retina screens

[deepfriedmind]

Agreed. Would be great if this could be fixed somehow.

[rozzy]

Hey guys. I was trying to resolve this issue for an hour and after several unsuccessful attempts i found a very funny, but working solution. Instead of playing with canvas width and height, i am trying to scale it:

var cl = new CanvasLoader('analysis_loader'),
    diameter = 44;
cl.setColor('#ffffff');
cl.setShape('spiral');
cl.setDiameter(diameter);
cl.setDensity(149);
cl.setRange(0.6);
cl.setSpeed(1);
cl.setFPS(60);
if (window.devicePixelRatio) {
  cl.setDiameter(diameter * 2);
  $('canvas').css({
    '-webkit-transform': 'scale(0.5)',
    '-webkit-transform-origin': 'top left',
    '-moz-transform': 'scale(0.5)',
    '-moz-transform-origin': 'top left',
    'transform': 'scale(0.5)',
    'transform-origin': 'top left',
  });
};
cl.show();

It works fine in Mac OS X browsers at latest MBPr: Safari, Firefox, Chrome, Yandex.Browser and latest Opera. Also it must be working at iOS retina devices.

I am not sure about windows retina devices, but if anybody have one, please reply to this message with feedback (work/not work).

Cheers from http://pocketdj.ru :-)

[robpataki]

Hey rozzy! Thank you very much for your effort, much appreciated! I have been working on an updated version of CanvasLoader and it will be shipped very soon (just have been very busy with client work lately). In the new version this issue has been addressed already, please sit tight, updates are coming soon! Thank you very much for everyone for being patient and giving feedback on the issues, many thanks!

[artemgordinskiy]

Hey Robert,
I guess you don't have the time to fix this issue right now. Any way I could help?