CANVAS Drawing line with jQuery example

CANVAS Drawing line with jQuery example


<script>
$(document).ready(function(){
var drawCanvas = document.getElementById('drawCanvas');
var drawBackup = new Array();
if (typeof drawCanvas.getContext == 'function') {
var ctx = drawCanvas.getContext('2d');
var isDraw = false;
var width = $('#width').val();;
var color = $('#color').val();
var pDraw = $('#drawCanvas').offset();
var currP = null;

$('#width').bind('change', function(){ width = $('#width').val(); });
$('#color').bind('change', function(){ color = $('#color').val(); });

if (localStorage['imgCanvas']) {
loadImage();
} else {
ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
}

// Event (mouse)
$('#drawCanvas').bind('mousedown', function(e) {
if (e.button===0) {
saveCanvas();
e.preventDefault();
ctx.beginPath();
isDraw = true;
}
});
$('#drawCanvas').bind('mousemove', function(e) {
var event = e.originalEvent;
e.preventDefault();
currP = { X:event.offsetX, Y:event.offsetY };
if(isDraw) draw_line(currP);
});
$('#drawCanvas').bind('mouseup', function(e) {
e.preventDefault();
isDraw = false;
});
$('#drawCanvas').bind('mouseleave', function(e) {
isDraw = false;
});

// Event (touchscreen)
$('#drawCanvas').bind('touchstart', function(e) {
saveCanvas();
e.preventDefault();
ctx.beginPath();
});
$('#drawCanvas').bind('touchmove', function(e) {
var event = e.originalEvent;
e.preventDefault();
currP = { X:event.touches[0].pageX-pDraw.left, Y:event.touches[0].pageY-pDraw.top };
draw_line(currP);
});
$('#drawCanvas').bind('touchend', function(e) {
e.preventDefault();
});

function draw_line(p) {
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.lineTo(p.X, p.Y);
ctx.moveTo(p.X, p.Y);
ctx.strokeStyle = color;
ctx.stroke();
}

function loadImage() { // reload from localStorage
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = localStorage.getItem('imgCanvas');
}

function saveImage() { // save to localStorage
var canvas = document.getElementById('drawCanvas');
localStorage.setItem('imgCanvas', canvas.toDataURL('image/png'));
var img =  document.getElementById('saveImg');
img.src = canvas.toDataURL('image/png');
var tmp = $('<a>').attr('download', 'test.png').attr('href', img.src);
tmp[0].click();
tmp.remove();
}

function clearCanvas() {
ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
ctx.beginPath();
localStorage.removeItem('imgCanvas');
}

function saveCanvas() {
drawBackup.push(ctx.getImageData(0, 0, drawCanvas.width, drawCanvas.height));
}

function prevCanvas() {
ctx.putImageData(drawBackup.pop(), 0, 0);
}

$('#btnPrev').click(function() {
prevCanvas();
});

$('#btnClea').click(function() {
clearCanvas();
});

$('#btnSave').click(function() {
saveImage();
});
}
});
</script>

<div>

<div align="center">

<canvas id="drawCanvas" width="320" height="320" style="border:1px solid #000000;">Canvas not supported</canvas>

</div>

<div align="center">

<select id="width">

<option value="1">1px</option>

<option value="2">2px</option>

<option value="3" selected>3px</option>

<option value="5">5px</option>

<option value="10">10px</option>

<option value="20">20px</option>

</select>

<select id="color">

<option value="#000000">Black</option>

<option value="#FF0000">Red</option>

<option value="#00FF00">Green</option>

<option value="#0000FF">Blue</option>

<option value="#FFFF00">Yellow</option>

<option value="#FFFFFF">White</option>

</select>

<button id="btnPrev">Undo</button>

<button id="btnClea">Clear</button>

<button id="btnSave">Save</button>

</div>

</div>

<img id="saveImg" src="" style="display:none;" />

Reference : http://itrooms.tistory.com/213