Created
July 2, 2019 02:19
-
-
Save imnnquy/ad2ade3351acc44fb5ade6934a286b91 to your computer and use it in GitHub Desktop.
// source https://jsbin.com/relofow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style id="jsbin-css"> | |
#image { | |
display:none; | |
width: 340px; | |
height: 700px; | |
} | |
</style> | |
<img id="image" src="https://c3po-ui.us-west-2.int.expedia.com/media/EXPEDIA_BOOKING_ANDROID_APP/expedia.co.kr_ko_KR/ff1087eb-d4af-4b60-b731-e8733e3bcf78/FlightSearching_1.jpg"> | |
<canvas id="canvas" width="340" height="700"> | |
Your browser does not support the HTML5 canvas tag. | |
</canvas> | |
<script id="jsbin-javascript"> | |
"use strict"; | |
var img = document.getElementById("image"); | |
var cvas = document.getElementById('canvas'); | |
var context = cvas.getContext("2d"); | |
context.drawImage(img, 0, 0, 340, 700); | |
var canvas = undefined, | |
startX = undefined, | |
endX = undefined, | |
startY = undefined, | |
endY = undefined; | |
var mouseIsDown = 0; | |
function init() { | |
canvas = document.getElementById("canvas"); | |
context = canvas.getContext("2d"); | |
canvas.addEventListener("mousedown", mouseDown, false); | |
canvas.addEventListener("mouseup", mouseUp, false); | |
} | |
function mouseUp() { | |
canvas.removeEventListener("mousemove", mouseXY, false); | |
if (mouseIsDown !== 0) { | |
mouseIsDown = 0; | |
drawSquare(); //update on mouse-up | |
} | |
} | |
function mouseDown() { | |
if (mouseIsDown) { | |
// in case user is drawing and move mouse outside the canvas | |
mouseUp(); | |
return; | |
} | |
canvas.addEventListener("mousemove", mouseXY, false); | |
mouseIsDown = 1; | |
startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract | |
startY = endY = event.clientY - canvas.offsetTop; //canvas offset | |
drawSquare(); //update | |
} | |
function mouseXY(eve) { | |
console.log('mouseXY'); | |
if (mouseIsDown !== 0) { | |
endX = eve.pageX - canvas.offsetLeft; | |
endY = eve.pageY - canvas.offsetTop; | |
drawSquare(); | |
} | |
} | |
function drawSquare() { | |
// creating a square | |
var width = Math.abs(startX - endX); | |
var height = Math.abs(startY - endY); | |
var startRectX = startX; | |
var startRectY = startY; | |
if (startX > endX) { | |
startRectX = endX; | |
} | |
if (startY > endY) { | |
startRectY = endY; | |
} | |
//or use fillRect if you use a bg color | |
context.drawImage(img, 0, 0, 340, 700); | |
context.beginPath(); | |
context.rect(startRectX, startRectY, width, height); | |
context.fillStyle = "transparent"; | |
context.fill(); | |
context.lineWidth = 2; | |
context.strokeStyle = 'red'; | |
context.stroke(); | |
} | |
init(); | |
</script> | |
<script id="jsbin-source-css" type="text/css">#image { | |
display:none; | |
width: 340px; | |
height: 700px; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">let img = document.getElementById("image"); | |
let cvas = document.getElementById('canvas'); | |
let context = cvas.getContext("2d"); | |
context.drawImage(img, 0, 0, 340, 700); | |
let canvas, startX, endX, startY, endY; | |
let mouseIsDown = 0; | |
function init() { | |
canvas = document.getElementById("canvas"); | |
context = canvas.getContext("2d"); | |
canvas.addEventListener("mousedown", mouseDown, false); | |
canvas.addEventListener("mouseup", mouseUp, false); | |
} | |
function mouseUp() { | |
canvas.removeEventListener("mousemove", mouseXY, false); | |
if (mouseIsDown !== 0) { | |
mouseIsDown = 0; | |
drawSquare(); //update on mouse-up | |
} | |
} | |
function mouseDown() { | |
if (mouseIsDown) { // in case user is drawing and move mouse outside the canvas | |
mouseUp(); | |
return; | |
} | |
canvas.addEventListener("mousemove", mouseXY, false); | |
mouseIsDown = 1; | |
startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract | |
startY = endY = event.clientY - canvas.offsetTop; //canvas offset | |
drawSquare(); //update | |
} | |
function mouseXY(eve) { | |
console.log('mouseXY'); | |
if (mouseIsDown !== 0) { | |
endX = eve.pageX - canvas.offsetLeft; | |
endY = eve.pageY - canvas.offsetTop; | |
drawSquare(); | |
} | |
} | |
function drawSquare() { | |
// creating a square | |
let width = Math.abs(startX - endX); | |
let height = Math.abs(startY - endY); | |
let startRectX = startX | |
let startRectY = startY | |
if (startX > endX) { | |
startRectX = endX | |
} | |
if (startY > endY) { | |
startRectY = endY | |
} | |
//or use fillRect if you use a bg color | |
context.drawImage(img, 0, 0, 340, 700); | |
context.beginPath(); | |
context.rect(startRectX, startRectY, width, height); | |
context.fillStyle = "transparent"; | |
context.fill(); | |
context.lineWidth = 2; | |
context.strokeStyle = 'red'; | |
context.stroke(); | |
} | |
init()</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#image { | |
display:none; | |
width: 340px; | |
height: 700px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
var img = document.getElementById("image"); | |
var cvas = document.getElementById('canvas'); | |
var context = cvas.getContext("2d"); | |
context.drawImage(img, 0, 0, 340, 700); | |
var canvas = undefined, | |
startX = undefined, | |
endX = undefined, | |
startY = undefined, | |
endY = undefined; | |
var mouseIsDown = 0; | |
function init() { | |
canvas = document.getElementById("canvas"); | |
context = canvas.getContext("2d"); | |
canvas.addEventListener("mousedown", mouseDown, false); | |
canvas.addEventListener("mouseup", mouseUp, false); | |
} | |
function mouseUp() { | |
canvas.removeEventListener("mousemove", mouseXY, false); | |
if (mouseIsDown !== 0) { | |
mouseIsDown = 0; | |
drawSquare(); //update on mouse-up | |
} | |
} | |
function mouseDown() { | |
if (mouseIsDown) { | |
// in case user is drawing and move mouse outside the canvas | |
mouseUp(); | |
return; | |
} | |
canvas.addEventListener("mousemove", mouseXY, false); | |
mouseIsDown = 1; | |
startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract | |
startY = endY = event.clientY - canvas.offsetTop; //canvas offset | |
drawSquare(); //update | |
} | |
function mouseXY(eve) { | |
console.log('mouseXY'); | |
if (mouseIsDown !== 0) { | |
endX = eve.pageX - canvas.offsetLeft; | |
endY = eve.pageY - canvas.offsetTop; | |
drawSquare(); | |
} | |
} | |
function drawSquare() { | |
// creating a square | |
var width = Math.abs(startX - endX); | |
var height = Math.abs(startY - endY); | |
var startRectX = startX; | |
var startRectY = startY; | |
if (startX > endX) { | |
startRectX = endX; | |
} | |
if (startY > endY) { | |
startRectY = endY; | |
} | |
//or use fillRect if you use a bg color | |
context.drawImage(img, 0, 0, 340, 700); | |
context.beginPath(); | |
context.rect(startRectX, startRectY, width, height); | |
context.fillStyle = "transparent"; | |
context.fill(); | |
context.lineWidth = 2; | |
context.strokeStyle = 'red'; | |
context.stroke(); | |
} | |
init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment