javascript - Canvas drawing takes a lot of time on Safari but not on Chrome or FF -

i making kaleidoscope on website. take image (either via drag & drop or default image on load) , copy 10 times (one each slice of kaleidoscope). on mouse move, rotation , scale of slices adjusted achieve desired effect.

on google chrome , firefox, works seamlessly, without lag. however, on safari website unusable slow. missing something?

here jsfiddle showing problem. please note tried replacing settimeout(update, 1000 / 60) requestanimationframe, without improvements.

jsfiddle: link

$(document).ready(function () {     //script kaleidoscope base      var dragdrop, kaleidoscope, c, dragger, gui, i, image, kaleidoscope, len, onchange, onmousemoved, options, ref, tr, tx, ty, update,         bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };      kaleidoscope = (function() {         kaleidoscope.prototype.half_pi = math.pi / 2;          kaleidoscope.prototype.two_pi = math.pi * 2;          var optimal_radius = window.innerheight;          if (window.innerwidth > optimal_radius) {             optimal_radius = window.innerwidth;         }          function kaleidoscope(options1) {             var key, ref, ref1, val;             this.options = options1 != null ? options1 : {};             this.defaults = {                 offsetrotation: 0.0,                 offsetscale: 1.0,                 offsetx: 0.0,                 offsety: 0.0,                 radius: optimal_radius / 1.4,                 slices: 12,                 zoom: 1.0             };             ref = this.defaults;             (key in ref) {                 val = ref[key];                 this[key] = val;             }             ref1 = this.options;             (key in ref1) {                 val = ref1[key];                 this[key] = val;             }             if (this.domelement == null) {                 this.domelement = document.getelementbyid('kaleidoscope');             }             if (this.context == null) {                 this.context = this.domelement.getcontext('2d');             }             if (this.image == null) {                 this.image = document.createelement('img');             }         }          kaleidoscope.prototype.draw = function() {             var cx, i, index, ref, results, scale, step;             this.domelement.width = this.domelement.height = this.radius * 2;             this.context.fillstyle = this.context.createpattern(this.image, 'repeat');             scale = this.zoom * (this.radius / math.min(this.image.width, this.image.height));             step = this.two_pi / this.slices;             cx = this.image.width / 2;             results = [];             (index = = 0, ref = this.slices; 0 <= ref ? <= ref : >= ref; index = 0 <= ref ? ++i : --i) {                 this.context.save();                 this.context.translate(this.radius, this.radius);                 this.context.rotate(index * step);                 this.context.beginpath();                 this.context.moveto(-0.5, -0.5);                 this.context.arc(0, 0, this.radius, step * -0.51, step * 0.51);                 this.context.lineto(0.5, 0.5);                 this.context.closepath();                 this.context.rotate(this.half_pi);                 this.context.scale(scale, scale);                 this.context.scale([-1, 1][index % 2], 1);                 this.context.translate(this.offsetx - cx, this.offsety);                 this.context.rotate(this.offsetrotation);                 this.context.scale(this.offsetscale, this.offsetscale);                 this.context.fill();                 results.push(this.context.restore());             }             return results;         };          return kaleidoscope;      })();      dragdrop = (function() {         function dragdrop(callback, context, filter) {             var disable;             this.callback = callback;             this.context = context != null ? context : document;             this.filter = filter != null ? filter : /^image/i;             this.ondrop = bind(this.ondrop, this);             disable = function(event) {                 event.stoppropagation();                 return event.preventdefault();             };             this.context.addeventlistener('dragleave', disable);             this.context.addeventlistener('dragenter', disable);             this.context.addeventlistener('dragover', disable);             this.context.addeventlistener('drop', this.ondrop, false);         }          dragdrop.prototype.ondrop = function(event) {             var file, reader;             event.stoppropagation();             event.preventdefault();             file = event.datatransfer.files[0];             if (this.filter.test(file.type)) {                 reader = new filereader;                 reader.onload = (function(_this) {                     return function(event) {                         return typeof _this.callback === "function" ? _this.callback(event.target.result) : void 0;                     };                 })(this);                 return reader.readasdataurl(file);             }         };          return dragdrop;      })();      image = new image;      image.onload = (function(_this) {         return function() {             return kaleidoscope.draw();         };     })(this);      image.src = 'img/kaleidoscope.jpg';      kaleidoscope = new kaleidoscope({         image: image,         slices: 10     });      kaleidoscope.domelement.style.position = 'absolute';      kaleidoscope.domelement.style.marginleft = -kaleidoscope.radius + 'px';      kaleidoscope.domelement.style.margintop = -kaleidoscope.radius + 'px';      kaleidoscope.domelement.style.left = '50%';      kaleidoscope.domelement.style.top = '50%';      document.getelementsbytagname('header')[0].appendchild(kaleidoscope.domelement);      dragger = new dragdrop(function(data) {         return kaleidoscope.image.src = data;     });      tx = kaleidoscope.offsetx;      ty = kaleidoscope.offsety;      tr = kaleidoscope.offsetrotation;      onmousemoved = (function(_this) {         return function(event) {             var cx, cy, dx, dy, hx, hy;             cx = window.innerwidth / 10;             cy = window.innerheight / 10;             dx = event.pagex / window.innerwidth;             dy = event.pagey / window.innerheight;             hx = dx - 0.5;             hy = dy - 0.5;             tx = hx * kaleidoscope.radius * -2;             ty = hy * kaleidoscope.radius * 2;             return tr = math.atan2(hy, hx);         };     })(this);      window.addeventlistener('mousemove', onmousemoved, false);      options = {         interactive: true,         ease: 0.1     };      (update = (function(_this) {         return function() {             var delta, theta;             if (options.interactive) {                 delta = tr - kaleidoscope.offsetrotation;                 theta = math.atan2(math.sin(delta), math.cos(delta));                 kaleidoscope.offsetx += (tx - kaleidoscope.offsetx) * options.ease;                 kaleidoscope.offsety += (ty - kaleidoscope.offsety) * options.ease;                 kaleidoscope.offsetrotation += (theta - kaleidoscope.offsetrotation) * options.ease;                 kaleidoscope.draw();             }             return settimeout(update, 1000 / 60);         };     })(this))();      onchange = (function(_this) {         return function() {             kaleidoscope.domelement.style.marginleft = -kaleidoscope.radius + 'px';             kaleidoscope.domelement.style.margintop = -kaleidoscope.radius + 'px';             options.interactive = false;             return kaleidoscope.draw();         };     })(this); }); 

from saw, problem occurs when canvas in full screen. if shows in small space, works seamlessly. however, on website, fullscreen.

regarding optimisation made code, , fact on safari still has framerate near zero. tried modifying picture use, reduce size(jpg quality 60, 30, 10), change image format (png24, png8), change size of picture (250x500 instead of 750x1500) , of changes changed nothing. still lagging lot.

i tried find benchmarks made safari canvas. found chart showing performances safari canvas not best.

you can see full benchmark article here

i think in end, after optimization made @jorge fuentes gonzález, code still rendering slow on safari maybe there reason , it's in core of webkit engine.