86 lines
1.8 KiB
JavaScript
86 lines
1.8 KiB
JavaScript
$( function() {
|
|
var canvas = $("#myCanvas");
|
|
var paint = new Paint(canvas[0].getContext("2d"));
|
|
|
|
function getMousePosition(event, canvas) {
|
|
var x, y;
|
|
|
|
if (event.offsetX) {
|
|
x = event.offsetX;
|
|
y = event.offsetY;
|
|
} else {
|
|
x = event.pageX - canvas.offsetLeft;
|
|
y = event.pageY - canvas.offsetTop;
|
|
}
|
|
|
|
return {
|
|
x: x,
|
|
y: y
|
|
};
|
|
}
|
|
|
|
canvas.mousedown(function(e) {
|
|
var pos = getMousePosition(e, this);
|
|
paint.isPainting = true;
|
|
paint.addClick(pos.x, pos.y, false);
|
|
paint.draw();
|
|
});
|
|
|
|
canvas.mousemove(function(e) {
|
|
if (paint.isPainting) {
|
|
var pos = getMousePosition(e, this);
|
|
paint.addClick(pos.x, pos.y, true);
|
|
paint.draw();
|
|
}
|
|
});
|
|
|
|
canvas.mouseup(function(e) {
|
|
paint.stop();
|
|
});
|
|
|
|
canvas.mouseleave(function(e) {
|
|
paint.stop();
|
|
});
|
|
|
|
$("#clearButton").click(function() {
|
|
paint.clear();
|
|
});
|
|
|
|
$("#colorPalette a").click(function() {
|
|
$("#colorPalette a").removeClass("active");
|
|
$(this).addClass("active");
|
|
paint.options.brushColour = "#"+this.name;
|
|
});
|
|
|
|
$("#newPaintModal").modal({
|
|
backdrop: 'static',
|
|
keyboard: false
|
|
});
|
|
|
|
$("#clearCanvasBtn").click(function() {
|
|
paint.clear();
|
|
});
|
|
|
|
$("#saveCanvasBtn").click(function() {
|
|
var dataURL = canvas[0].toDataURL().replace('data:image/png', 'data:application/octet-stream');
|
|
window.open(dataURL);
|
|
});
|
|
|
|
$("#blankCanvas").click(function() {
|
|
paint.clear();
|
|
$("#newPaintModal").modal("hide");
|
|
});
|
|
|
|
$("#batmanCanvas").click(function() {
|
|
paint.clear();
|
|
paint.drawImage("img/batman.gif");
|
|
$("#newPaintModal").modal("hide");
|
|
});
|
|
|
|
$("#spidermanCanvas").click(function() {
|
|
paint.clear();
|
|
paint.drawImage("img/spiderman.gif");
|
|
$("#newPaintModal").modal("hide");
|
|
});
|
|
});
|