Drag Canvas Image 2

A mini version of a sprite drawing tool working with layers. Simulates something similar to as if you are working in photoshop and are moving layers around.

by black strings

HTML

<div style="padding:20px;">
<div id="designContainer"></div>
  

</div>
<!-- sprites added in the scene -->

<!-- sprites to choose from -->
<div id="assetPanel"></div>
<div id="bgCon"></div>
<div id="savedCon">Svim</div>
<div id="btnSizeCon"></div>
<div id="btnCon"></div>

CSS

canvas{border:1px solid blue;}
/*.canvas2{ border:1px solid red; width:400px; height: 400px;}*/
#savedCon { 
  border: thin solid black; 
  padding:5px;
  display:inline-block;
}
#savedCon img{
  width:50%;
}
#assetPanel img { width:5%;}
#bgCon { border: thin solid black; margin:5px;}
#bgCon img { width:5%; border: thin solid grey; margin:2px;}
#assetsCon {display: inline-block; margin:5px; border:thin solid blue;}
#scenePanel { border: thin solid green; padding:3px;}
#scenePanel img {width:5%;}
#scenePanel img.selected {border:thin solid green;}

JavaScript

// ############################ 
// CANVAS
// #############
var Canvas = (function(){
	function Canvas(cssId, width, height){
  	this.width = width;
    this.height = height;
  	this.dom = document.createElement('canvas');
    this.dom.className = 'canvas2';
    this.dom.setAttribute('id', cssId);
    //this.canvas.style.width = width + 'px';
    //this.canvas.style.height = height + 'px';
    
    // this use to set attribute width and height
    // do not set the width and height directly on canvas
    // ex: this.canvas.height = 100; // no no
    this.dom.setAttribute('width', width);
    this.dom.setAttribute('height', height);
    // don't do this
    //this.canvas.height = height;
    //this.canvas.height = width;
    
    this.ctx = this.dom.getContext('2d');
    //this.drawBorder();
    //this.offSetX = this.canvas.offSet().left;
    //this.offSetY = this.canvas.offSet().top;
  }
  Canvas.prototype.resize = function(width, height){
  	this.width = width;
    this.height = height;
  	this.dom.setAttribute('width', width);
    this.dom.setAttribute('height', height);
  }
  Canvas.prototype.getWidth = function(){
  	return this.dom.width;
  }
  Canvas.prototype.getHeight = function(){
  	return this.dom.height;
  }
  Canvas.prototype.clear = function(){
  	this.ctx.clearRect(0, 0, this.dom.width, this.dom.height);
  }
  Canvas.prototype.drawBorder = function(){
  	var ctx = this.ctx;
    ctx.strokeStyle = 'black'; 
    ctx.beginPath();
  	ctx.rect(0,0,this.dom.width, this.dom.height);
		ctx.stroke();
    ctx.closePath();
  }
  Canvas.prototype.restoreCtx = function(){
  	this.ctx.setTransform(1, 0, 0, 1, 0, 0); 
  }
  Canvas.prototype.getImage = function(){
  	var img = new Image();
    img.src = this.dom.toDataURL();
    return img;
  }
  Canvas.prototype.getBG = function(){
  	var ctx = this.ctx;
    this.clear();
    ctx.fillStyle = this.getRandomColor();
    ctx.fillRect(0,0,this.width, this.height);
    return this.getImage();
  }
 ...