Skip to content

Instantly share code, notes, and snippets.

@darjanin

darjanin/index.html

Created January 29, 2015 22:22
Show Gist options
  • Save darjanin/dcaf01965afb5a446348 to your computer and use it in GitHub Desktop.
Save darjanin/dcaf01965afb5a446348 to your computer and use it in GitHub Desktop.
Download ZIP
Paint // source http://jsbin.com/dovija
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Paint</title>
<style id="jsbin-css">
#container { position: relative; }
#imageView { border: 1px solid #000; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
</style>
</head>
<body>
<label> Drawing tool:
<select id="dtool">
<option value="rect">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="line">Pencil</option>
<option value="point">Point</option>
</select>
</label>
<div id="container">
<canvas id="imageView" width="400" height="300"></canvas>
</div>
<script id="jsbin-javascript">
if (window.addEventListener) { window.addEventListener('load', function() {
var canvas, context, canvaso, contexto;
var tool = false;
var tool_default = 'rect';
function init() {
canvaso = document.getElementById('imageView');
contexto = canvaso.getContext('2d');
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
canvas.id = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext('2d');
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
var tool_select = document.getElementById('dtool');
tool_select.addEventListener('change', ev_tool_change, false);
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
}
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
var tools = {};
tools.rect = function () {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0);
var y = Math.min(ev._y, tool.y0);
var w = Math.abs(ev._x - tool.x0);
var h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (w === 0 || h === 0) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.pencil = function () {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function(ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.line = function() {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(tool.x0, tool.y0);
context.lineTo(ev._x, ev._y);
context.stroke();
context.closePath();
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.point = function() {
this.mouseup = function(ev) {
context.beginPath();
context.moveTo(0, ev._y);
context.lineTo(canvas.width, ev._y);
context.stroke();
context.closePath();
context.beginPath();
context.arc(ev._x, ev._y, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#DE0000';
context.fill();
img_update();
};
};
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetY == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
var func = tool[ev.type];
if (func) {
func(ev);
}
}
init();
}, false); }
</script>
<script id="jsbin-source-css" type="text/css">#container { position: relative; }
#imageView { border: 1px solid #000; }
#imageTemp { position: absolute; top: 1px; left: 1px; }</script>
<script id="jsbin-source-javascript" type="text/javascript">if (window.addEventListener) { window.addEventListener('load', function() {
var canvas, context, canvaso, contexto;
var tool = false;
var tool_default = 'rect';
function init() {
canvaso = document.getElementById('imageView');
contexto = canvaso.getContext('2d');
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
canvas.id = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext('2d');
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
var tool_select = document.getElementById('dtool');
tool_select.addEventListener('change', ev_tool_change, false);
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
}
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
var tools = {};
tools.rect = function () {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0);
var y = Math.min(ev._y, tool.y0);
var w = Math.abs(ev._x - tool.x0);
var h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (w === 0 || h === 0) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.pencil = function () {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function(ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.line = function() {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(tool.x0, tool.y0);
context.lineTo(ev._x, ev._y);
context.stroke();
context.closePath();
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.point = function() {
this.mouseup = function(ev) {
context.beginPath();
context.moveTo(0, ev._y);
context.lineTo(canvas.width, ev._y);
context.stroke();
context.closePath();
context.beginPath();
context.arc(ev._x, ev._y, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#DE0000';
context.fill();
img_update();
};
};
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetY == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
var func = tool[ev.type];
if (func) {
func(ev);
}
}
init();
}, false); }</script></body>
</html>
Raw
jsbin.dovija.css
#container { position: relative; }
#imageView { border: 1px solid #000; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
Raw
jsbin.dovija.js
if (window.addEventListener) { window.addEventListener('load', function() {
var canvas, context, canvaso, contexto;
var tool = false;
var tool_default = 'rect';
function init() {
canvaso = document.getElementById('imageView');
contexto = canvaso.getContext('2d');
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
canvas.id = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext('2d');
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
var tool_select = document.getElementById('dtool');
tool_select.addEventListener('change', ev_tool_change, false);
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
}
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
var tools = {};
tools.rect = function () {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0);
var y = Math.min(ev._y, tool.y0);
var w = Math.abs(ev._x - tool.x0);
var h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (w === 0 || h === 0) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.pencil = function () {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.mousemove = function(ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.line = function() {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(tool.x0, tool.y0);
context.lineTo(ev._x, ev._y);
context.stroke();
context.closePath();
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
tools.point = function() {
this.mouseup = function(ev) {
context.beginPath();
context.moveTo(0, ev._y);
context.lineTo(canvas.width, ev._y);
context.stroke();
context.closePath();
context.beginPath();
context.arc(ev._x, ev._y, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#DE0000';
context.fill();
img_update();
};
};
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) {
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetY == 0) {
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
var func = tool[ev.type];
if (func) {
func(ev);
}
}
init();
}, false); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment