/*
* Canvas Feedback -- "video feedback" in an HTML5 canvas
* Copyright (c)2015-2018 Chris Pressey, Cat's Eye Technologies.
* Distributed under an MIT license -- see this URL for full information:
* https://github.com/catseye/canvas-feedback/blob/master/LICENSE
*/
/*
* Requires yoob.Animation to be loaded first.
*/
CanvasFeedback = function() {
this.init = function(cfg) {
this.canvas = cfg.canvas;
this.ctx = this.canvas.getContext("2d");
this.img = new Image();
this.r = 0;
this.width = cfg.width;
this.height = cfg.height;
this.rotationRate = def(cfg.rotationRate, 200);
this.shrinkLeft = def(cfg.shrinkLeft, 1);
this.shrinkRight = def(cfg.shrinkRight, 1);
this.shrinkTop = def(cfg.shrinkTop, 1);
this.shrinkBottom = def(cfg.shrinkBottom, 1);
var $this = this;
this.animation = (new yoob.Animation()).init({
'object': $this,
'mode': 'quantum'
});
this.animation.start();
this.img.onload = function() {
$this.reset();
}
this.img.src = cfg.imgUrl;
};
this.draw = function() {
var ctx = this.ctx;
var width = this.canvas.width;
var height = this.canvas.height;
var centerX = width / 2;
var centerY = height / 2;
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(this.r);
ctx.translate(-1 * centerX, -1 * centerY);
this.r += this.rotationRate / 1000000;
ctx.drawImage(this.canvas,
this.shrinkLeft, this.shrinkTop,
this.canvas.width - this.shrinkLeft - this.shrinkRight,
this.canvas.height - this.shrinkTop - this.shrinkBottom);
ctx.restore();
};
this.update = function() {
};
this.loadImage = function(url) {
var $this = this;
this.img.onload = function() {
$this.reset();
}
this.img.src = url;
};
this.reset = function() {
// assumed to only be called after a (new) image is loaded.
if (this.width === undefined) this.width = this.img.width;
if (this.height === undefined) this.height = this.img.height;
this.canvas.width = this.width;
this.canvas.height = this.height;
this.r = 0;
this.ctx.drawImage(this.img, 0, 0, this.width, this.height);
this.resume();
};
this.resume = function() {
this.animation.start();
};
this.pause = function() {
this.animation.stop();
};
};