Drag Canvas Image

by black strings

HTML

<div id="designContainer">
  <canvas id="canvas" width=400 height=300></canvas>
  <div id="assetsCon">Assets <br>Pig<br>Horse<br>Chicken<br>Cow<br>Sheep</div>
</div>
<div id="templateCon">BG</div>
<div id="savedCon">Saved Image</div>

CSS

body{ background-color: ivory; }
canvas{border:1px solid blue;}
/*.canvas2{ border:1px solid red; width:400px; height: 400px;}*/
#savedCon { 
  border: thin solid black; 
  padding:5px;
}
#savedCon img{
  width:20%;
}
#templateCon { border: thin solid black; margin:5px;}
#templateCon img { width:10%; border: thin solid grey; margin:5px;}
#assetsCon {display: inline-block; margin:5px; border:thin solid blue;}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var canvasWidth=canvas.width;
var canvasHeight=canvas.height;
var isDragging=false;

var imgPos = {x:0, y:0};
var mouseDownOffSet = {x:0, y:0};
var selectedBackgroundImage = null;

var savedImage = document.createElement("img");
document.getElementById("savedCon").appendChild(savedImage);

//populate the mock templates
populateTemplates();


var Canvas = (function(){
	function Canvas(width, height){
  	this.canvas = document.createElement('canvas');
    this.canvas.className = 'canvas2';
    this.canvas.style.width = width + 'px';
    this.canvas.style.height = height + 'px';
    // don't do this
    //this.canvas.height = height;
    //this.canvas.height = width;
    
    this.ctx = this.canvas.getContext('2d');
    //this.drawBorder();
    //this.offSetX = this.canvas.offSet().left;
    //this.offSetY = this.canvas.offSet().top;
  }
  Canvas.prototype.clear = function(){
  	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
  Canvas.prototype.drawBorder = function(){
  	var ctx = this.ctx;
    ctx.strokeStyle = 'black'; 
    ctx.beginPath();
  	ctx.rect(0,0,this.canvas.width,this.canvas.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.canvas.toDataURL();
    return img;
  }
  Canvas.prototype._getHeart = function(){
    var ctx = this.ctx;
    this.clear();
    // restore any scaling or reset identity matrix back to normal
    //this.ctx.setTransform(1, 0, 0, 1, 0, 0); 
  
    //ctx.scale(.15,.15);
    
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75,...