Skip to content

Instantly share code, notes, and snippets.

@hmschreiner

hmschreiner/canvas-rectangle.html

Created October 13, 2015 20:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hmschreiner/23a5e3b55c260992ecab to your computer and use it in GitHub Desktop.
Save hmschreiner/23a5e3b55c260992ecab to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas-rectangle.html
<!DOCTYPE html>
<html>
<head>
<style>
#canvas {
width:2000px;
height:2000px;
border: 10px solid transparent;
}
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
</style>
</head>
<body>
<script>
function ScreenCapture () {
'use strict';
this.components = {
mouse: {
x: 0,
y: 0,
startX: 0,
startY: 0
},
element: null,
canvas: 'canvas'
};
};
ScreenCapture.prototype.setCanvas = function (canvas){
this.components.canvas = canvas;
}
ScreenCapture.prototype.setMousePosition = function (e){
var ev = e || window.event;
if(ev.pageX) {
this.components.mouse.x = ev.pageX + window.pageXOffset;
this.components.mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) {
this.components.mouse.x = ev.clientX + document.body.scrollLeft;
this.components.mouse.y = ev.clientY + document.body.scrollTop;
}
}
ScreenCapture.prototype.init = function() {
var canvas = document.createElement('div'),
_self = this;
console.log(canvas)
canvas.id = this.components.canvas;
document.body.appendChild(canvas);
canvas.onmousemove = function (){
_self.setMousePosition();
if(_self.components.element !== null) {
_self.components.element.style.width = Math.abs(_self.components.mouse.x - _self.components.mouse.startX) + 'px';
_self.components.element.style.height = Math.abs(_self.components.mouse.y - _self.components.mouse.startY) + 'px';
_self.components.element.style.left = (_self.components.mouse.x - _self.components.mouse.startX < 0) ? _self.components.mouse.x + 'px' : _self.components.mouse.startX + 'px';
_self.components.element.style.top = (_self.components.mouse.y - _self.components.mouse.startY < 0) ? _self.components.mouse.y + 'px' : _self.components.mouse.startY + 'px';
}
};
canvas.onclick = function (e) {
if (_self.components.element !== null) {
_self.components.element = null;
canvas.style.cursor = "default";
console.log("finished.");
} else {
console.log("begun.");
_self.components.mouse.startX = _self.components.mouse.x;
_self.components.mouse.startY = _self.components.mouse.y;
_self.components.element = document.createElement('div');
_self.components.element.className = 'rectangle'
_self.components.element.style.left = _self.components.mouse.x + 'px';
_self.components.element.style.top = _self.components.mouse.y + 'px';
canvas.appendChild(_self.components.element)
canvas.style.cursor = "crosshair";
}
}
};
var ScreenCapture = new ScreenCapture();
ScreenCapture.init();
// function drawCropSelection(canvas) {
//
// function setMousePosition(e) {
// var ev = e || window.event; //Moz || IE
// if (ev.pageX) { //Moz
// mouse.x = ev.pageX + window.pageXOffset;
// mouse.y = ev.pageY + window.pageYOffset;
// } else if (ev.clientX) { //IE
// mouse.x = ev.clientX + document.body.scrollLeft;
// mouse.y = ev.clientY + document.body.scrollTop;
// }
// };
//
// var mouse = {
// x: 0,
// y: 0,
// startX: 0,
// startY: 0
// };
// var element = null;
//
// canvas.onmousemove = function (e) {
// setMousePosition();
// if (element !== null) {
// element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
// element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
// element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
// element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
// }
// }
//
// canvas.onclick = function (e) {
// if (element !== null) {
// element = null;
// canvas.style.cursor = "default";
// console.log("finsihed.");
// } else {
// console.log("begun.");
// mouse.startX = mouse.x;
// mouse.startY = mouse.y;
// element = document.createElement('div');
// element.className = 'rectangle'
// element.style.left = mouse.x + 'px';
// element.style.top = mouse.y + 'px';
// canvas.appendChild(element)
// canvas.style.cursor = "crosshair";
// }
// }
// }
//
// initDraw(document.getElementById('canvas'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment