cdf/src/old/_Canvas.js

A library for creating oldschool demo-like animations with JavaScript

var utils = require('../utils');

var canvas_initialized = 0;
var temp_canvas;

_Canvas.prototype = {

  rescale: function(xs,ys){
    //TODO: Rewrite
    xs = xs || 1;
    ys = ys || xs;
    var hx = this.handlex, hy = this.handley, mh = this.midhandled;
    temp_canvas.setSize(this.w*xs,this.h*ys);
    temp_canvas.ctx.save();
    temp_canvas.ctx.imageSmoothingEnabled=false;
    temp_canvas.clear();
    this.draw(temp_canvas,0,0,1,0,xs,ys);
    this.clear();
    this.setSize(this.w*xs,this.h*ys);
    temp_canvas.draw(this,0,0);
    temp_canvas.ctx.restore();
    this.setHandle(hx,hy,mh);
    return this;
  },

  draw: function (dst, x, y, alpha, rot, w, h) {
    // TODO: Rewrite
    dst.ctx.save();
    if (!this.aa) {
      dst.ctx.imageSmoothingEnabled = false;
      dst.ctx.translate(0.5, 0.5);
    }

    if(alpha === undefined) alpha = 1;
    dst.ctx.globalAlpha = alpha;
    if (arguments.length === 3 || arguments.length === 4)
      dst.ctx.drawImage(this.canvas, x - this.handlex, y - this.handley);
    else if (arguments.length === 5) {
      dst.ctx.translate(x, y);
      dst.ctx.rotate(rot * DEG_TO_RAD);
      dst.ctx.translate(-this.handlex, -this.handley);
      dst.ctx.drawImage(this.canvas, 0, 0);
      dst.ctx.setTransform(1, 0, 0, 1, 0, 0);
    } else {
      dst.ctx.translate(x, y);
      dst.ctx.rotate(rot * DEG_TO_RAD);
      dst.ctx.scale(w, h);
      dst.ctx.translate(-this.handlex, -this.handley);
      dst.ctx.drawImage(this.canvas, 0, 0);
      dst.ctx.setTransform(1, 0, 0, 1, 0, 0);
    }
    dst.ctx.restore();
    return this;
  },

  // -- Sprite functions (TODO: Rewrite!)

  initTile: function (tileWidth, tileHeight, tileStart) {
    this.tileh = tileHeight;
    this.tilew = tileWidth;
    if (typeof (tileStart) !== 'undefined')
      this.tilestart = tileStart;
    return this;
  },

  drawTile: function (dst, nb, x, y, alpha, rot, w, h) {
    dst.ctx.save();
    alpha = alpha || 1;
    dst.ctx.globalAlpha = alpha;
    this.drawPart(dst, x, y, Math.floor((nb % (this.canvas.width / this.tilew))) * this.tilew, Math.floor(nb / (this.canvas.width / this.tilew)) * this.tileh, this.tilew, this.tileh, alpha, rot, w, h);
    dst.ctx.restore();
    return this;
  },

  drawPart: function (dst, x, y, partx, party, partw, parth, alpha, rot, xScale, yScale) {
    if (partx < 0) {
      x -= partx / (this.midhandled? 2 : 1);
      partw += partx;
      partx = 0;
    } else {
      if (!this.midhandled) {
        partw = Math.min(partw, this.width - partx);
      }
    }
    if (party < 0) {
      y -= party / (this.midhandled? 2 : 1);
      parth += party;
      party = 0;
    } else {
      if (!this.midhandled) {
        parth = Math.min(parth, this.height - party);
      }
    }
    if (partw <= 0 || parth <= 0) {
      return;
    }
    var tmp = dst.ctx.globalAlpha;
    if (typeof (alpha) === 'undefined') alpha = 1;
    dst.ctx.globalAlpha = alpha;
    if (arguments.length >= 7 && arguments.length === 8) {
      dst.ctx.translate(x, y);
      if (this.midhandled) dst.ctx.translate(-partw / 2, -parth / 2);
      else dst.ctx.translate(-this.handlex, -this.handley);
      dst.ctx.drawImage(this.canvas, partx, party, partw, parth, 0, 0, partw, parth);
      dst.ctx.setTransform(1, 0, 0, 1, 0, 0);
    } else if (arguments.length === 9) {
      dst.ctx.translate(x, y);
      dst.ctx.rotate(rot * DEG_TO_RAD);
      if (this.midhandled) dst.ctx.translate(-partw / 2, -parth / 2);
      else dst.ctx.translate(-this.handlex, -this.handley);
      dst.ctx.drawImage(this.canvas, partx, party, partw, parth, 0, 0, partw, parth);
      dst.ctx.setTransform(1, 0, 0, 1, 0, 0);
    } else {
      dst.ctx.translate(x, y);
      dst.ctx.rotate(rot * DEG_TO_RAD);
      dst.ctx.scale(xScale, yScale);
      if (this.midhandled) dst.ctx.translate(-partw / 2, -parth / 2);
      else dst.ctx.translate(-this.handlex, -this.handley);
      dst.ctx.drawImage(this.canvas, partx, party, partw, parth, 0, 0, partw, parth);
      dst.ctx.setTransform(1, 0, 0, 1, 0, 0);
    }
    dst.ctx.globalAlpha = tmp;
    return this;
  },

  print: function (dst, str, x, y, alpha, rot, w, h) {
    for (var i = 0; i < str.length; i++) {
      if (typeof (w) !== 'undefined')
        this.drawTile(dst, str[i].charCodeAt(0) - this.tilestart, x + i * this.tilew * w, y, alpha, rot, w, h);
      else
        this.drawTile(dst, str[i].charCodeAt(0) - this.tilestart, x + i * this.tilew, y, alpha, rot, w, h);
    }
    return this;
  },



  mask: function (mask,method,x,y) {
    method = method || 'source-in';

    var hx = this.handlex, hy = this.handley, mh = this.midhandled;
    this.setHandle(0,0,false);

    var maskedCanvas;
    if(this.__mask){
      maskedCanvas=this.__mask;
      if(maskedCanvas.w !== this.w || maskedCanvas.h !== this.h) maskedCanvas.setSize(this.w,this.h);
    } else {
      maskedCanvas = this.__mask = new _Canvas(this.w,this.h);
    }
    maskedCanvas.ctx.save();
    maskedCanvas.clear();
    mask.draw(maskedCanvas,x||0,y||0);
    maskedCanvas.ctx.globalCompositeOperation=method;
    this.draw(maskedCanvas,0,0);
    maskedCanvas.ctx.restore();
    this.setHandle(hx,hy,mh);
    return maskedCanvas;

  },

  // -- Css





  // -- Define pattern for canvas
  // TODO: Finish this

  pattern: function(pattern, repetition){
    repetition = repetition || 'repeat';
    if(pattern instanceof _Canvas){
      return this.ctx.createPattern(pattern.element, repetition);
    }
    return this.ctx.createPattern(whatever,repetition);
  },


};

module.exports = _Canvas;