KineticJS automatically detects the current device's pixel ratio and renders graphics accordingly so that they will be as crisp as possible on high DPI displays. Sometimes you'd like to opt for a less precise (fuzzier) rendering but higher average framerate, this gist will give you that control.

KineticJS-PixelRatio_Override.coffee

# Adjust device pixel ratio
setMaximumPixelRatio = (p_maximumRatio=1) ->
	canvas = document.createElement('canvas')
	context = canvas.getContext('2d')
	devicePixelRatio = window.devicePixelRatio || 1
	backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1
	pixelRatio = devicePixelRatio / backingStoreRatio

	for className in ["HitCanvas", "SceneCanvas", "Canvas"]
		Kinetic[className].prototype.init = ((p_method) -> (p_config={}) ->
			if p_config.pixelRatio? then pixelRatio = p_config.pixelRatio
			p_config.pixelRatio = if pixelRatio > p_maximumRatio then p_maximumRatio else pixelRatio
			p_method.call @, p_config
		) Kinetic[className].prototype.init

setMaximumPixelRatio 1

KineticJS-PixelRatio_Override.js

setMaximumPixelRatio = function(p_maximumRatio) {
  var backingStoreRatio, canvas, className, context, devicePixelRatio, pixelRatio, _i, _len, _ref, _results;

  if (p_maximumRatio == null) {
    p_maximumRatio = 1;
  }
  canvas = document.createElement('canvas');
  context = canvas.getContext('2d');
  devicePixelRatio = window.devicePixelRatio || 1;
  backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
  pixelRatio = devicePixelRatio / backingStoreRatio;
  _ref = ["HitCanvas", "SceneCanvas", "Canvas"];
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    className = _ref[_i];
    _results.push(Kinetic[className].prototype.init = (function(p_method) {
      return function(p_config) {
        if (p_config == null) {
          p_config = {};
        }
        if (p_config.pixelRatio != null) {
          pixelRatio = p_config.pixelRatio;
        }
        p_config.pixelRatio = pixelRatio > p_maximumRatio ? p_maximumRatio : pixelRatio;
        return p_method.call(this, p_config);
      };
    })(Kinetic[className].prototype.init));
  }
  return _results;
};

setMaximumPixelRatio(1);

Thank you for this snippet. I had a problem where zoom levels < 100% were causing problems in my app and would cause strange scaling behavior sort of like this ericdrowell/KineticJS#563.

This snipped solved the trick, I just adjusted the function to setMinPixelRatio instead of max and it worked.

Thank you!

Thanks a lot for sharing @ElliotChong
I had a problem when zoom was under 100% like @justinspradlin causing graphics to be bordered with black — as seen on http://get.antoine.io/image/2z0p0V2X1L1Z