html5 canvas draw & filltext & imageurl

html:

	text : 


	



	
	

js:

var canvas, context, tool;
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');

context.font = 'italic 40px Calibri';

if(window.addEventListener){
	window.addEventListener('load', InitEvent, false);
}

function InitEvent (){
  if (!canvas) {
	 alert('캔버스 객체를 찾을 수 없음');
	 return;
  }

  if (!canvas.getContext) {
	 alert('Drawing Contextf를 찾을 수 없음');
	 return;
  }

  // 2D canvas context를 가져 온다.
  context = canvas.getContext('2d');
  if (!context) {
	 alert('getContext() 함수를 호출 할 수 없음');
	 return;
  }

  // tool_pencil 함수의 인스턴스를 생성 한다.
  tool = new tool_pencil();

  // Canvas에 mousedown, mousemove, mouseup 이벤트 리스너를 추가한다.
  canvas.addEventListener('mousedown', ev_canvas, false);
  canvas.addEventListener('mousemove', ev_canvas, false);
  canvas.addEventListener('mouseup',   ev_canvas, false);
}
 
// 마우스 이동을 추적 하여 그리기 작업을 수행 한다.
function tool_pencil(){
  var tool = this;
  this.started = false;

  // 마우스를 누를때 그리기 작업을 시작 한다.
  this.mousedown = function (ev){
		context.beginPath();
		context.moveTo(ev._x, ev._y);
		tool.started = true;
  };

  // 마우스가 이동 할때(mousemove) 마다 호출 된다.
  this.mousemove = function(ev){
		if (tool.started){
			 context.lineTo(ev._x, ev._y);
			 context.stroke();
		}
  };

  // 마우스 좌측 버튼을 놓았을때(mouseup) 호출 된다. 
  this.mouseup = function (ev){
	 if (tool.started){
		 tool.mousemove(ev);
		 tool.started = false;
	 }
  };
}

// Canvas요소 내의 좌표를 결정 한다.
function ev_canvas(ev){
  if (ev.layerX || ev.layerX == 0){ // Firefox 브라우저
	 ev._x = ev.layerX;
	 ev._y = ev.layerY;
  }else if (ev.offsetX || ev.offsetX == 0){ // Opera 브라우저
	 ev._x = ev.offsetX;
	 ev._y = ev.offsetY;
  }

  // tool의 이벤트 핸들러를 호출한다.
  var func = tool[ev.type];
 
  if (func){
	func(ev);
  }
}

function fnCngText(sGetVal){
	context.clearRect(0,0,canvas.width, canvas.height);
	context.fillText(sGetVal, 50, 110);	
}

function fnGetData(){
	var dataURL = canvas.toDataURL(); 

	$("#view_img").html("");
}